Echarts 多个图表

矫情吗；* 2022-05-28 12:56 290阅读 0赞

**[一个Option 四个均匀分布图表][Option]**

![20180406111258634][]

var dataAll = [
        [
            [10.0, 8.04],
            [8.0, 6.95],
            [13.0, 7.58],
            [9.0, 8.81],
            [11.0, 8.33],
            [14.0, 9.96],
            [6.0, 7.24],
            [4.0, 4.26],
            [12.0, 10.84],
            [7.0, 4.82],
            [5.0, 5.68]
        ],
        [
            [10.0, 9.14],
            [8.0, 8.14],
            [13.0, 8.74],
            [9.0, 8.77],
            [11.0, 9.26],
            [14.0, 8.10],
            [6.0, 6.13],
            [4.0, 3.10],
            [12.0, 9.13],
            [7.0, 7.26],
            [5.0, 4.74]
        ],
        [
            [10.0, 7.46],
            [8.0, 6.77],
            [13.0, 12.74],
            [9.0, 7.11],
            [11.0, 7.81],
            [14.0, 8.84],
            [6.0, 6.08],
            [4.0, 5.39],
            [12.0, 8.15],
            [7.0, 6.42],
            [5.0, 5.73]
        ],
        [
            [8.0, 6.58],
            [8.0, 5.76],
            [8.0, 7.71],
            [8.0, 8.84],
            [8.0, 8.47],
            [8.0, 7.04],
            [8.0, 5.25],
            [19.0, 12.50],
            [8.0, 5.56],
            [8.0, 7.91],
            [8.0, 6.89]
        ]
    ];
    
    var markLineOpt = {
        animation: false,
        label: {
            normal: {
                formatter: 'y = 0.5 * x + 3',
                textStyle: {
                    align: 'right'
                }
            }
        },
        lineStyle: {
            normal: {
                type: 'solid'
            }
        },
        tooltip: {
            formatter: 'y = 0.5 * x + 3'
        },
        data: [[{
            coord: [0, 3],
            symbol: 'none'
        }, {
            coord: [20, 13],
            symbol: 'none'
        }]]
    };
    
    option = {
        title: {
            text: 'Anscombe\'s quartet',
            x: 'center',
            y: 0
        },
        grid: [
            /*38% 宽度图表刚好不接触*/
            /*左上*/
            {x: '7%', y: '7%', width: '38%', height: '38%'},
            /*右上*/
            {x2: '7%', y: '7%', width: '38%', height: '38%'},
            /*左下*/
            {x: '7%', y2: '7%', width: '38%', height: '38%'},
            /*右下*/
            {x2: '7%', y2: '7%', width: '38%', height: '38%'}
        ],
        tooltip: {
            formatter: 'Group {a}: ({c})'
        },
        xAxis: [
            {gridIndex: 0, min: 0, max: 20},
            {gridIndex: 1, min: 0, max: 20},
            {gridIndex: 2, min: 0, max: 20},
            {gridIndex: 3, min: 0, max: 20}
        ],
        yAxis: [
            {gridIndex: 0, min: 0, max: 15},
            {gridIndex: 1, min: 0, max: 15},
            {gridIndex: 2, min: 0, max: 15},
            {gridIndex: 3, min: 0, max: 15}
        ],
        series: [
            {
                name: 'I',
                type: 'scatter',
                xAxisIndex: 0,
                yAxisIndex: 0,
                data: dataAll[0],
                markLine: markLineOpt
            },
            {
                name: 'II',
                type: 'scatter',
                xAxisIndex: 1,
                yAxisIndex: 1,
                data: dataAll[1],
                markLine: markLineOpt
            },
            {
                name: 'III',
                type: 'scatter',
                xAxisIndex: 2,
                yAxisIndex: 2,
                data: dataAll[2],
                markLine: markLineOpt
            },
            {
                name: 'IV',
                type: 'scatter',
                xAxisIndex: 3,
                yAxisIndex: 3,
                data: dataAll[3],
                markLine: markLineOpt
            }
        ]
    };

左右均匀分布

var dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370];
    var yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10'];
    var option = {
        backgroundColor: '#0f375f',
        title: [{
            text: "各渠道投诉占比",
            x: 'center',
            y: 0,
            textStyle: {
                color: "#fff",
                fontSize: "14"
    
            }
        }, ],
        grid: [{
                x: '7%',
                y: '7%',
                width: '38%'
            },
            {
                x2: '7%',
                y: '7%',
                width: '38%'
            },
        ],
        tooltip: {
            formatter: '{b} ({c})'
        },
        xAxis: [{
                gridIndex: 0,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
            {
                gridIndex: 1,
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                }
            },
        ],
        yAxis: [{
            gridIndex: 0,
            interval: 0,
            data: yAxisData.reverse(),
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#6173a3"
                }
            },
        }, {
            gridIndex: 1,
            interval: 0,
            data: yAxisData.reverse(),
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true
            },
            splitLine: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#6173a3"
                }
            },
        }],
        series: [
    
            {
                name: '投诉原因TOP10',
                type: 'bar',
                xAxisIndex: 0,
                yAxisIndex: 0,
                barWidth: '45%',
                itemStyle: {
                    normal: {
                        color: '#86c9f4'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#9EA7C4"
                        }
                    }
                },
                data: dataAll.sort(),
            }, {
                name: '各渠道投诉占比',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                barWidth: '45%',
                itemStyle: {
                    normal: {
                        color: '#86c9f4'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        textStyle: {
                            color: "#9EA7C4"
                        }
                    }
                },
                data: dataAll.sort(),
            },
    
        ]
    };

![20180406110711811][]

[Option]: http://echarts.baidu.com/option.html#grid
[20180406111258634]: /images/20220528/9d4174738ebd4c2986a3a2aecd9698ff.png
[20180406110711811]: /images/20220528/de2f6d50af86477cb7369affb7fa1180.png

发表评论取消回复

表情：

评论列表（有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读

相关 echarts统计图表

1、简介 ECharts是百度的一个项目，后来百度把Echart捐给apache，用于图表展示，提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地

雨点打透心脏的1/2处/ 2024年04月06日 11:13/ 0 赞/ 50 阅读

相关 echarts图表的自适应处理，包含同页面单个图表和多个图表两种情况

目录一：同页面单个图表的自适应处理二：同页面多个图表的自适应处理参考一：同页面单个图表的自适应处理 //

红太狼/ 2022年12月19日 03:43/ 0 赞/ 210 阅读

相关 Echarts实现图表联动（多图联动、图表间联动）

效果如图 ![在这里插入图片描述][20200908193007468.gif_pic_center] 本实例代码 function loadBlock9

谁借莪１个温暖的怀抱￠/ 2022年12月05日 01:37/ 0 赞/ 552 阅读

相关 Echarts多个图表自适应窗口大小

页面中只有一个 `echarts` 图表时和有多个 `echarts`图表时，设置自适应的方法是不一样的一个 echarts 图表自适应 let myChar

心已赠人/ 2022年11月11日 05:26/ 0 赞/ 239 阅读

相关 vue页面中多个echarts图表随窗口缩放变化

不知道大家是否遇见过 window.onresize 在实现 vue 中使用两个及以上 echarts 图表时只有最后一个图表会跟随窗口大小变化或者所有图表大小都不会变化的情况

叁歲伎倆/ 2022年09月05日 01:49/ 0 赞/ 306 阅读

相关 Echarts 多个图表

[一个Option 四个均匀分布图表][Option] ![20180406111258634][] var dataAll = [

矫情吗；*/ 2022年05月28日 12:56/ 0 赞/ 291 阅读

相关 ECharts使用总结：属性解释+修改+效果展示+多个图表切换

原文出处： [https://blog.csdn.net/webFront/article/details/79159534][https_blog.csdn.net_webF

缺乏、安全感/ 2022年05月20日 02:35/ 0 赞/ 297 阅读

相关 Echarts图表制作

<1>常用到的参数 `1)-i`：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。 `2)-o`：生成的 bundle 文件，可以是绝对路径或者基于当前命

雨点打透心脏的1/2处/ 2022年04月02日 03:02/ 0 赞/ 357 阅读

相关在vue-lic里面显示多个Echarts图表

直接看源码代码： <template> <div> <div id="main" :style="{width: '600px',heig

Love The Way You Lie/ 2022年03月09日 19:46/ 0 赞/ 253 阅读

相关 echarts实现一个页面同时显示多个图表

今天群里有小姐姐问同一个页面显示多个图表，如何操作？先抛出一个官方的例子：[https://gallery.echartsjs.com/editor.html?c=xhju

短命女/ 2021年11月17日 22:28/ 0 赞/ 1419 阅读