首页 > 建站教程 > JS、jQ、TS >  echarts实现联动图左图展示全部,右侧展示部分数据正文

echarts实现联动图左图展示全部,右侧展示部分数据

我爱模板网在使用echarts时,要实现左侧显示柱状图,右侧显示饼图,左侧柱状图里面有个线条总计,右侧不能显示,效果图如下:



如果直接套用官网的效果,那么柱状图和线条的数据,都会渲染进右侧的饼图。在初始化数据时,必须根据左侧数据,重新组装右侧数据(默认右侧是统计左边,所以,要将左侧的数据进行累加):
//左侧数据
let leftData = [
    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
    ['A', 141.1, 30.4, 265.1, 353.3, 183.8, 98.7],
    ['B', 86.5, 192.1, 85.7, 83.1, 73.4, 355.1],
    ['C', 24.1, 67.2, 179.5, 86.4, 65.2, 82.5],
    ['D', 55.2, 67.1, 169.2, 72.4, 253.9, 39.1],
    ['总计', 355.2, 267.1, 169.2, 572.4, 353.9, 239.1]
]
//右侧数据
let rightData = [];
leftData.map((item,index) => {
    if(index!==0 && index!==leftData.length-1){
        let total = 0;
        item.map((item2,index2) => {
            if(index2!==0){
                total += item2;
            }
        })
        rightData.push({
            name:item[0],
            value:total.toFixed(2)
        })
    }
})
当鼠标浮动到左边的柱状图,右侧也要进行数据更新,实现联动:
myChart.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value+1;
        let rightData = [];
        leftData.map((item,index) => {
            if(index!==0 && index!==leftData.length-1){
                let total = item[dimension];
                rightData.push({
                    name:item[0],
                    value:total
                })
            }
        })
        myChart.setOption({
            series: {
                id: 'pie',
                data:rightData
            }
        });
    }
});
最终代码如下:
<div id="main"></div>

<script src="echarts.min.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

let winWidth = document.body.clientWidth;
let barWidth = winWidth*(30/1920);

let leftData = [
    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
    ['A', 141.1, 30.4, 265.1, 353.3, 183.8, 98.7],
    ['B', 86.5, 192.1, 85.7, 83.1, 73.4, 355.1],
    ['C', 24.1, 67.2, 179.5, 86.4, 65.2, 82.5],
    ['D', 55.2, 67.1, 169.2, 72.4, 253.9, 39.1],
    ['总计', 355.2, 267.1, 169.2, 572.4, 353.9, 239.1]
]

let rightData = [];
leftData.map((item,index) => {
    if(index!==0 && index!==leftData.length-1){
        let total = 0;
        item.map((item2,index2) => {
            if(index2!==0){
                total += item2;
            }
        })
        rightData.push({
            name:item[0],
            value:total.toFixed(2)
        })
    }
})

option = {
    backgroundColor:'#fff',
    title:{
        textStyle:{
            color:'#4c4c4c',
            fontSize:14,
            fontWeight:'normal'
        },
        text:'用例数',
        left:0,
        top:0
    },
    legend: {
        bottom:0,
    },
    tooltip: {
        padding: 10,
        backgroundColor:'rgba(255,255,255,1)',
        trigger: 'axis',
        textStyle: {
            color:'#333',
            fontSize:16,
        },
        axisPointer: {
            type: 'shadow',
            shadowStyle: {color:'rgba(150,150,150,0.1)'}
        }
    },
    grid: {
        left: '0',
        right: '40%',
        top: '10%',
        bottom: '20%',
        containLabel: true
    },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 60,
            bottom:'12%',
        }
    ],
    dataset: {
        source: leftData
    },
    xAxis: {
        type: 'category',
        //隐藏x轴刻度
        axisTick: {
            show: false
        },
        //设置x轴名称及x轴线条颜色
        axisLine: {
            show: true,
            lineStyle: {
                color: '#4d4d4d'
            }
        },
    },
    yAxis: {
        gridIndex: 0,
        //设置网格线颜色
        splitLine: {
            show: true,
            lineStyle:{
               color: '#f0f0f0'
          }
       },
        axisTick: {
            //隐藏x轴刻度
            show: false
        },
        axisLine: {
            //设置x轴名称及x轴线条颜色
            show: false
        },
    },
    series: [
        {type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            {offset: 0, color: '#09c7c1'},{offset: 1, color: '#0da1d4'}
        ])}},
        {type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            {offset: 0, color: '#6086fc'},{offset: 1, color: '#3555f1'}
        ])}},
        {type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            {offset: 0, color: '#fbc97d'},{offset: 1, color: '#fd7e4c'}
        ])}},
        {type: 'bar', barWidth:barWidth, seriesLayoutBy: 'row', itemStyle:{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
            {offset: 0, color: '#f85d85'},{offset: 1, color: '#eb2d6e'}
        ])}},
        {
            type: 'line', smooth: true, seriesLayoutBy: 'row', itemStyle:{
                width:30,
                color: '#2c63f0'
            },
            symbolSize:10,
            lineStyle: {
                width: 3,
                shadowColor: 'rgba(0,0,0,0.2)',
                shadowBlur: 10,
                shadowOffsetY: 10,
            },
            areaStyle: {
                normal: {
                    color: {
                        x: 0, y: 0, x2: 0, y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: "rgba(227,234,253,1)" // 100% 处的颜色
                        },{
                            offset: 1,
                            color: "rgba(227,234,253,0)" // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    }
                }
            },
        },
        {type: 'pie', id: 'pie', radius: ['45%', '70%'], center: ['80%', '45%'],
            data:rightData,
            label: {
                formatter: '{b}: {@2012} ({d}%)'
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 15,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                    color: function(params) {
                        var colorList = [
                        {c1: ' #09c7c1', c2: '#0da1d4'},
                        {c1: ' #6086fc', c2: '#3555f1'},
                        {c1: '#fbc97d', c2: '#fd7e4c'},
                        {c1: ' #f85d85', c2: '#eb2d6e'},
                        //{c1: ' #0a3cbd', c2: '#2c63f0'}  //屏蔽 总计 的颜色
                        ]
                        if(params.dataIndex<4){
                            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                offset: 0,
                                color: colorList[params.dataIndex].c1
                            }, {
                                offset: 1,
                                color: colorList[params.dataIndex].c2
                            }])
                        }
                    }
                }
            }
        }
    ]
};

myChart.on('updateAxisPointer', function (event) {
    var xAxisInfo = event.axesInfo[0];
    if (xAxisInfo) {
        var dimension = xAxisInfo.value+1;
        let rightData = [];
        leftData.map((item,index) => {
            if(index!==0 && index!==leftData.length-1){
                let total = item[dimension];
                rightData.push({
                    name:item[0],
                    value:total
                })
            }
        })
        myChart.setOption({
            series: {
                id: 'pie',
                data:rightData
            }
        });
    }
});

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>