Echarts 多个图表

矫情吗；* 2022-05-28 12:56 362阅读 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 条评论，362人围观）

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

相关阅读

相关 echarts统计图表

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

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

相关 echarts图表演示图表演示

eCharts图表演示比如说，公司现在接一个项目，这个中信银行，针对之前所有的贷款、大小客户，要做出来图表系统（演示和查看）、报表系统（用来打印）。郑州的大数据产

怼烎@/ 2023年09月29日 18:25/ 0 赞/ 17 阅读

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

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

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

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

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

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

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

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

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

相关 Echarts 多个图表

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

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

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

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

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

相关 Echarts图表制作

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

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

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

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

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

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

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

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