Echarts
只有在已有的Datav插件无法满足你的需求时，才去使用echarts，因为echarts相对来说性能和交互性都会比其它插件差一些
饼图示例
饼图是非常常用的图表，但是你无法通过Datav的原生插件来创建一个饼图，因此我们使用echarts插件来实现，下面的例子基于echarts官方示例来完成。
使用echart插件
进入仪表盘，选择新建图表 -> 可视化 -> Echarts,此时能看到下面这张图表:
这张图表使用了模拟数据，自动为你生成的，同时你能在右侧的Options看到如下代码片段,请跟着代码注释来了解对应的功能:
// data:通过数据源传进来的数据,但是在下面代码没有使用，这里用的模拟数据
// theme: datav的theme对象，可以从里面获取相应的颜色等主题信息
// echartsInstance: echarts对象，具体可以在echarts官方了解用法
// setVariable, setTime, history 这三个我们在图表交互章节有详细介绍
function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history) {
// 为图表设置点击事件
echartsInstance.off('click')
echartsInstance.on('click', (point) => {
alert('chart on click')
console.log(point)
})
// 模拟图表需要的数据
var dataBJ = [SOME DATA...];
var dataGZ = [SOME DATA...];
var dataSH = [SOME DATA...];
var schema = [
{name: 'date', index: 0, text: '日'},
{name: 'AQIindex', index: 1, text: 'AQI指数'},
{name: 'PM25', index: 2, text: 'PM2.5'},
{name: 'PM10', index: 3, text: 'PM10'},
{name: 'CO', index: 4, text: '一氧化碳（CO）'},
{name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
{name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
];
var itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
};
// 返回一个对象，包含图表的属性和数据，该对象对应的是echarts中的option对象
return {
backgroundColor: '#404a59',
color: [
'#dd4444', '#fec42c', '#80F1BE'
],
legend: {
top: 10,
data: ['北京', '上海', '广州'],
textStyle: {
color: '#fff',
fontSize: 16
}
},
grid: {
left: '10%',
right: 150,
top: '18%',
bottom: '10%'
},
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ obj.seriesName + ' ' + value[0] + '日：'
+ value[7]
+ '</div>'
+ schema[1].text + '：' + value[1] + '<br>'
+ schema[2].text + '：' + value[2] + '<br>'
+ schema[3].text + '：' + value[3] + '<br>'
+ schema[4].text + '：' + value[4] + '<br>'
+ schema[5].text + '：' + value[5] + '<br>'
+ schema[6].text + '：' + value[6] + '<br>';
}
},
xAxis: {
type: 'value',
name: '日期',
nameGap: 16,
nameTextStyle: {
color: '#fff',
fontSize: 14
},
max: 31,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#eee'
}
},
splitLine: {
show: false
}
},
visualMap: [
{
left: 'right',
top: '10%',
dimension: 2,
min: 0,
max: 250,
itemWidth: 30,
itemHeight: 120,
calculable: true,
precision: 0.1,
text: ['圆形大小：PM2.5'],
textGap: 30,
textStyle: {
color: '#fff'
},
inRange: {
symbolSize: [10, 70]
},
outOfRange: {
symbolSize: [10, 70],
color: ['rgba(255,255,255,.2)']
},
controller: {
inRange: {
color: ['#c23531']
},
outOfRange: {
color: ['#444']
}
}
},
{
left: 'right',
bottom: '5%',
dimension: 6,
min: 0,
max: 50,
itemHeight: 120,
precision: 0.1,
text: ['明暗：二氧化硫'],
textGap: 30,
textStyle: {
color: '#fff'
},
inRange: {
colorLightness: [1, 0.5]
},
outOfRange: {
color: ['rgba(255,255,255,.2)']
},
controller: {
inRange: {
color: ['#c23531']
},
outOfRange: {
color: ['#444']
}
}
}
],
series: [
{
name: '北京',
type: 'scatter',
itemStyle: itemStyle,
data: dataBJ
},
{
name: '上海',
type: 'scatter',
itemStyle: itemStyle,
data: dataSH
},
{
name: '广州',
type: 'scatter',
itemStyle: itemStyle,
data: dataGZ
}
]
}
}现在我们大概了解要怎么配置echarts插件，那么开始构建之前提到的饼图。
修改饼图配置
前往echarts饼图官方示例，可以看到官方例子中，左边是配置代码,右边是具体的图表，你可以在线修改
配置代码，看看会发生什么。
接着拷贝左边的示例代码中option对象的值(花括号以及里面的内容)，然后拷贝到Datav的echarts插件编辑中，替换掉return后面的对象，
接着删除return之前的大部分代码，只保留点击事件的代码， 修改后，代码如下：
function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history) {
// Add click event for our chart
echartsInstance.off('click') // clear side effects
echartsInstance.on('click', (point) => {
alert('chart on click')
console.log(point)
})
// return a chart object, contains chart attributes and data, this object is as same as echarts option object
return {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 274, name: '联盟广告'},
{value: 235, name: '视频广告'},
{value: 400, name: '搜索引擎'}
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
}此时我们的饼图已经渲染出来，简单吧？
图表互动
echarts同样支持图表互动，通过点击事件来完成. 在setEchartsOption函数中添加/修改以下代码:
function setEchartsOption(data, theme, echartsInstance, echarts, setVariable, setTime, history) {
echartsInstance.off('click') // clear side effects
echartsInstance.on('click', (point) => {
// 在这里设置点击事件...
// 设置模版变量
setVariable('app','gateway')
// 设置当前时间
setTime('2020-12-09 00:00:00', '2020-12-10 00:00:00')
// 前往指定页面
history.push('/apps/$app') // setEchartsOption函数支持模版变量替换
})
.
.
.
}细心的读者应该发现了，在`setEchartsOption`中，支持使用模版变量
使用方式总结
掌握以下五点，基本上你就能做出自己想要的任何图表：
- 在echarts官网找到你感兴趣的官方示例
- 复制
option对象的值，替换我们的setEchartsOption中的return对象, 因为return返回的就是echarts的option配置 - 把echarts官网例子中option之前的代码复制，然后放在我们的
setEchartsOption的return之前 - 真实数据需要使用
setEchartsOption的data参数，处理后生成echarts图表需要的数据格式 - 查看echarts文档，了解如何个性化配置图表
更多示例
更多示例请访问Datav在线Demo，搜索echarts，查看相关图表