代码片 -- ECharts 图表联动
前言
此处需要报表统计分析短信发送情况，短信发送有发送成功，失败，未知等状态，此处以成功失败为例。图表关联饼图不需要对比短信发送量，短信发送量是总量，只需要对比成功，失败，未知等发送情况占比分析即可。
此处扩展官方实例 官方文档
- 支持自定义颜色，
- 支持图表和面板数据分离管理，dataset 定义多个 source，图表数据绑定可通过 datasetIndex 绑定
效果如下
演示代码
<html style="height: 100%">
<head>
<meta charset="utf-8">
head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%">div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js">script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126">script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js">script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
setTimeout(function () {
option = {
legend: {},
tooltip: {
trigger: 'axis',
showContent: true
},
dataset: [{
source: [
['itemName', '2019-12-12', '2019-12-13', '2019-12-14', '2019-12-15', '2019-12-16', '2019-12-17'],
['短信发送', 1203948, 340000, 786541, 130298, 680000, 860023],
['成功', 1001046, 298237, 693003, 119899, 639287, 792837],
['失败', 202942, 41763, 93538, 10399, 40713, 67186]
]
},{
source: [
['itemName', '2019-12-12', '2019-12-13', '2019-12-14', '2019-12-15', '2019-12-16', '2019-12-17'],
['成功', 1001046, 298237, 693003, 119899, 639287, 792837],
['失败', 202942, 41763, 93538, 10399, 40713, 67186]
]
}],
xAxis: {type: 'category'},
yAxis: {gridIndex: 0},
grid: {top: '55%'},
series: [
{type: 'line', smooth: true, seriesLayoutBy: 'row', datasetIndex: 0, color: '#00a650', areaStyle: {}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', datasetIndex: 0, color: '#0072bc', areaStyle: {}},
{type: 'line', smooth: true, seriesLayoutBy: 'row', datasetIndex: 0, color: '#9d0a0f',areaStyle: {}},
{
// 自定义数据源
datasetIndex: 1,
type: 'pie',
id: 'pie',
radius: '30%',
center: ['50%', '25%'],
label: {
formatter: '{b}: {@2012-12-12} ({d}%)'
},
// 默认渲染一组数据的饼图
encode: {
itemName: 'itemName',
value: '2012-12-12',
tooltip: '2012-12-12'
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal:{
color:function(params) {
// 自定义颜色
var colorList = ['#0072bc', '#9d0a0f'];
return colorList[params.dataIndex]
}
}
}
}
]
};
myChart.on('updateAxisPointer', function (event) {
var xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
var dimension = xAxisInfo.value + 1;
myChart.setOption({
series: {
id: 'pie',
label: {
formatter: '{b}: {@[' + dimension + ']} ({d}%)'
},
encode: {
value: dimension,
tooltip: dimension
}
}
});
}
});
myChart.setOption(option);
});;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
script>
body>
html>
Power By niaonao, The End, Thanks