只有在已有的Datav插件无法满足你的需求时,才去使用echarts,因为echarts相对来说性能和交互性都会比其它插件差一些
饼图是非常常用的图表,但是你无法通过Datav的原生插件来创建一个饼图,因此我们使用echarts插件来实现,下面的例子基于echarts官方示例来完成。
进入仪表盘,选择新建图表 -> 可视化 -> 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`中,支持使用模版变量
掌握以下五点,基本上你就能做出自己想要的任何图表:
option
对象的值,替换我们的setEchartsOption
中的return
对象, 因为return
返回的就是echarts的option配置setEchartsOption
的return
之前setEchartsOption
的data
参数,处理后生成echarts图表需要的数据格式更多示例请访问Datav在线Demo,搜索echarts,查看相关图表