Echart图标控件。
属性 |
属性说明 |
|---|---|
|
AutoShowInterval |
动态显示tooltip的间隔时间 |
|
AutoShowLoopSeries |
是否循环显示tooltip |
|
CustomThemeName |
自定义主题名称，注：不能设置为Custom、Light、Dark |
|
Option |
数据源 |
|
Theme |
主题 |
|
ThemeJson |
自定义主题 |
TooltipAutoShow |
是否动态显示tooltip |
事件 |
事件说明 |
|---|---|
|
EChartsPress |
在点击EChart时触发 |
Step 1.打开https://echarts.apache.org/examples/zh/index.html ,找到折柱混合图，点击查看代码
Step 2.复制Echart网站上的代码（option部分代码）
Step 3.新建窗体，在窗体中加入ECharts组件，将复制的代码粘贴到窗体的Load的事件中，代码如下：
C#：
eCharts1.Option = @"{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
},
{
name: '平均温度',
type: 'line',
yAxisIndex: 1,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
}";
运行之后即可看到效果
自定义主题设置
Step 1.打开网址https://echarts.apache.org/zh/theme-builder.html，更改主题设置后点击【下载主题】-【Json版本】，复制代码，粘贴到ThemeJson属性（注意：复制的代码需要将“"”替换成“'”或者“""”）
C#：
eCharts1.CustomThemeName = "newtheme";
eCharts1.ThemeJson = @"{
""color"": [
""#4ea397"",
""#22c3aa"",
""#7bd9a5"",
""#d0648a"",
""#f58db2"",
""#f2b3c9""
],
""backgroundColor"": ""rgba(255,255,255,0)"",
""textStyle"": { },
""title"": {
""textStyle"": {
""color"": ""#666666""
},
""subtextStyle"": {
""color"": ""#999999""
}
},
""line"": {
""itemStyle"": {
""borderWidth"": ""2""
},
""lineStyle"": {
""width"": ""3""
},
""symbolSize"": ""8"",
""symbol"": ""emptyCircle"",
""smooth"": false
},
""radar"": {
""itemStyle"": {
""borderWidth"": ""2""
},
""lineStyle"": {
""width"": ""3""
},
""symbolSize"": ""8"",
""symbol"": ""emptyCircle"",
""smooth"": false
},
""bar"": {
""itemStyle"": {
""barBorderWidth"": 0,
""barBorderColor"": ""#ccc""
}
},
""pie"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""scatter"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""boxplot"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""parallel"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""sankey"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""funnel"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""gauge"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
}
},
""candlestick"": {
""itemStyle"": {
""color"": ""#d0648a"",
""color0"": ""transparent"",
""borderColor"": ""#d0648a"",
""borderColor0"": ""#22c3aa"",
""borderWidth"": ""1""
}
},
""graph"": {
""itemStyle"": {
""borderWidth"": 0,
""borderColor"": ""#ccc""
},
""lineStyle"": {
""width"": ""1"",
""color"": ""#cccccc""
},
""symbolSize"": ""8"",
""symbol"": ""emptyCircle"",
""smooth"": false,
""color"": [
""#4ea397"",
""#22c3aa"",
""#7bd9a5"",
""#d0648a"",
""#f58db2"",
""#f2b3c9""
],
""label"": {
""color"": ""#ffffff""
}
},
""map"": {
""itemStyle"": {
""areaColor"": ""#eeeeee"",
""borderColor"": ""#999999"",
""borderWidth"": 0.5
},
""label"": {
""color"": ""#28544e""
},
""emphasis"": {
""itemStyle"": {
""areaColor"": ""rgba(34,195,170,0.25)"",
""borderColor"": ""#22c3aa"",
""borderWidth"": 1
},
""label"": {
""color"": ""#349e8e""
}
}
},
""geo"": {
""itemStyle"": {
""areaColor"": ""#eeeeee"",
""borderColor"": ""#999999"",
""borderWidth"": 0.5
},
""label"": {
""color"": ""#28544e""
},
""emphasis"": {
""itemStyle"": {
""areaColor"": ""rgba(34,195,170,0.25)"",
""borderColor"": ""#22c3aa"",
""borderWidth"": 1
},
""label"": {
""color"": ""#349e8e""
}
}
},
""categoryAxis"": {
""axisLine"": {
""show"": true,
""lineStyle"": {
""color"": ""#cccccc""
}
},
""axisTick"": {
""show"": false,
""lineStyle"": {
""color"": ""#333""
}
},
""axisLabel"": {
""show"": true,
""color"": ""#999999""
},
""splitLine"": {
""show"": true,
""lineStyle"": {
""color"": [
""#eeeeee""
]
}
},
""splitArea"": {
""show"": false,
""areaStyle"": {
""color"": [
""rgba(250,250,250,0.05)"",
""rgba(200,200,200,0.02)""
]
}
}
},
""valueAxis"": {
""axisLine"": {
""show"": true,
""lineStyle"": {
""color"": ""#cccccc""
}
},
""axisTick"": {
""show"": false,
""lineStyle"": {
""color"": ""#333""
}
},
""axisLabel"": {
""show"": true,
""color"": ""#999999""
},
""splitLine"": {
""show"": true,
""lineStyle"": {
""color"": [
""#eeeeee""
]
}
},
""splitArea"": {
""show"": false,
""areaStyle"": {
""color"": [
""rgba(250,250,250,0.05)"",
""rgba(200,200,200,0.02)""
]
}
}
},
""logAxis"": {
""axisLine"": {
""show"": true,
""lineStyle"": {
""color"": ""#cccccc""
}
},
""axisTick"": {
""show"": false,
""lineStyle"": {
""color"": ""#333""
}
},
""axisLabel"": {
""show"": true,
""color"": ""#999999""
},
""splitLine"": {
""show"": true,
""lineStyle"": {
""color"": [
""#eeeeee""
]
}
},
""splitArea"": {
""show"": false,
""areaStyle"": {
""color"": [
""rgba(250,250,250,0.05)"",
""rgba(200,200,200,0.02)""
]
}
}
},
""timeAxis"": {
""axisLine"": {
""show"": true,
""lineStyle"": {
""color"": ""#cccccc""
}
},
""axisTick"": {
""show"": false,
""lineStyle"": {
""color"": ""#333""
}
},
""axisLabel"": {
""show"": true,
""color"": ""#999999""
},
""splitLine"": {
""show"": true,
""lineStyle"": {
""color"": [
""#eeeeee""
]
}
},
""splitArea"": {
""show"": false,
""areaStyle"": {
""color"": [
""rgba(250,250,250,0.05)"",
""rgba(200,200,200,0.02)""
]
}
}
},
""toolbox"": {
""iconStyle"": {
""borderColor"": ""#999999""
},
""emphasis"": {
""iconStyle"": {
""borderColor"": ""#666666""
}
}
},
""legend"": {
""textStyle"": {
""color"": ""#999999""
}
},
""tooltip"": {
""axisPointer"": {
""lineStyle"": {
""color"": ""#cccccc"",
""width"": 1
},
""crossStyle"": {
""color"": ""#cccccc"",
""width"": 1
}
}
},
""timeline"": {
""lineStyle"": {
""color"": ""#4ea397"",
""width"": 1
},
""itemStyle"": {
""color"": ""#4ea397"",
""borderWidth"": 1
},
""controlStyle"": {
""color"": ""#4ea397"",
""borderColor"": ""#4ea397"",
""borderWidth"": 0.5
},
""checkpointStyle"": {
""color"": ""#4ea397"",
""borderColor"": ""#3cebd2""
},
""label"": {
""color"": ""#4ea397""
},
""emphasis"": {
""itemStyle"": {
""color"": ""#4ea397""
},
""controlStyle"": {
""color"": ""#4ea397"",
""borderColor"": ""#4ea397"",
""borderWidth"": 0.5
},
""label"": {
""color"": ""#4ea397""
}
}
},
""visualMap"": {
""color"": [
""#d0648a"",
""#22c3aa"",
""#adfff1""
]
},
""dataZoom"": {
""backgroundColor"": ""rgba(255,255,255,0)"",
""dataBackgroundColor"": ""rgba(222,222,222,1)"",
""fillerColor"": ""rgba(114,230,212,0.25)"",
""handleColor"": ""#cccccc"",
""handleSize"": ""100%"",
""textStyle"": {
""color"": ""#999999""
}
},
""markPoint"": {
""label"": {
""color"": ""#ffffff""
},
""emphasis"": {
""label"": {
""color"": ""#ffffff""
}
}
}
}";
