代码片 -- ECharts 图表联动

前言

此处需要报表统计分析短信发送情况,短信发送有发送成功,失败,未知等状态,此处以成功失败为例。图表关联饼图不需要对比短信发送量,短信发送量是总量,只需要对比成功,失败,未知等发送情况占比分析即可。

此处扩展官方实例 官方文档

  • 支持自定义颜色,
  • 支持图表和面板数据分离管理,dataset 定义多个 source,图表数据绑定可通过 datasetIndex 绑定

效果如下

在这里插入图片描述

演示代码

<!DOCTYPE html>
<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

©️2020 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页