多表格Echarts绘制

生成多表格Echarts图

1.多表格需求

1. 需求定义，当你需要在页面上一次性画出多个echarts图表，而且一个表格两侧都需要展示Y坐标，亦或者在曲线上展示多个曲线都可以实现
   此例子是基于VUE实现的。

实现效果图

数据格式

代码

   initEchart(data) {
                this.yAixData = [];
                this.echartSeries = [];
                //图表定位
                let chartGridTop = 40;
                let chartGridHeight = 100;
                let listLength = data.data.length;
                //直角坐标系内绘图网格
                function makeGrid(top, height, opt) {
                    return echarts.util.merge({
                        left: 70,
                        right: 60,
                        top: top,
                        height: height
                    }, opt || {}, true);
                }

                //X轴生成器
                function makeXAxis(gridIndex,opt) {
                    //避免X轴数据显示过于频繁
                    var   axisLabelFlag = false;
                    //  if (gridIndex % 2 == 0) {
                    //      axisLabelFlag = true;
                    //  }
                    if(gridIndex == (listLength-1)) {
                        axisLabelFlag = true;
                    }
                    return echarts.util.merge({
                        type: 'category',
                        gridIndex: gridIndex,
                        //统一时间轴数据
                        data: data.xAxis,
                        axisLabel: {
                            show: axisLabelFlag,
                        },
                    }, opt || {}, true);
                }

                //Y轴生成器
                function makeYAxis(gridIndex, opt) {
                    return echarts.util.merge({
                        type: 'value',
                        nameLocation: 'middle',
                        nameGap: '40',
                        gridIndex: gridIndex,
                        nameTextStyle: {
                            color: '#333'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true
                        },
                    }, opt || {}, true);
                }

                //数据生成器
                function makeGridData(xAxisIndex, yAxisIndex, chartType,chartName, chartData, opt) {
                    return echarts.util.merge({
                        type: chartType,
                        name: chartName,
                        xAxisIndex: xAxisIndex,
                        yAxisIndex: yAxisIndex,
                        data: chartData,
                    }, opt || {}, true);
                }
                let ydata = data.data

                    ydata.forEach((value, index) => {
                          this.yAixData.push(makeYAxis(index,{name:value.name1}));
                }),
                //这个地方循环两遍是为了将y轴另一侧的坐标轴加上。（这个地方一定要注意，右面一列一定是在左侧渲染之后再进行右侧渲染这个是有顺序的不然出不来）
                ydata.forEach((value, index) => {
                    this.yAixData.push(makeYAxis(index,{name:value.name2}));
            }),
                    ydata.forEach((value, index) => {
                         this.echartSeries.push( makeGridData(index, index, 'line', value.name1,value.data1, {
                             color: '#' + Math.random().toString(16).substr(2, 6).toUpperCase()
                         }))
                this.echartSeries.push(makeGridData(index, (listLength+index), 'line',value.name2, value.data2, {
                    color: '#' + Math.random().toString(16).substr(2, 6).toUpperCase()
                }))
                })
                this.height = (37 + ydata.length * 140) + 'px'
                this.option = {

                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    tooltip: {
                        //移动端展示方式
                        trigger: 'axis',
                        transitionDuration: 0,
                        confine: true,
                        borderRadius: 4,
                        borderWidth: 1,
                        borderColor: '#333',
                        backgroundColor: 'rgba(255,255,255,0.9)',
                        textStyle: {
                            fontSize: 12,
                            color: '#333'
                        },
                    },
                    animation: true,
                    grid: ydata.map((value, index) => {
                        return makeGrid(chartGridTop + (chartGridHeight + 25) * index, chartGridHeight)
                    }),
                xAxis: ydata.map((value, index) => {
                    return makeXAxis(index)
                }),
                yAxis: this.yAixData,

                series:this.echartSeries,

            }
            },

参考地址: 请点击.