Echarts 柱状图及折线图

Dear 丶 2022-11-03 15:24 229阅读 0赞

##### 效果 #####

![柱状及折线图表][20210228203149221.png]

##### 功能 #####

1.  防止悬浮框溢出
2.  图例图标宽高度修改
3.  柱状图之间间距设置
4.  X轴数据名称柱状图内显示（注释）
5.  X轴数据名称倾斜显示
6.  X轴文字显示优先级（注释）
7.  柱状图初始显示数量
8.  柱状图颜色渐变
9.  折线图点大小
10. 鼠标点击，滚动，拖动柱状图展示所有数据

###### 代码 ######

let option = { 
        tooltip: { 
            trigger: 'axis',
            confine: true, // 防止悬浮框溢出图表
        },
        grid: { 
            bottom: "21.2%",
            height: 96, 
        },
        legend: { 
            data: ['水质达标率', '水量达标率', '水质达标个数', '水量达标个数'],
            textStyle: {   // 图例样式
                color: "#fff",
                fontSize: 9
            },
            itemWidth: 10,  // 设置宽度 图例图标的宽高
            itemHeight: 6, // 设置高度
            itemGap: 4 // 设置间距 图例间距
            // bottom: "1%",
        },
        color: ["#FF7F00", "#00FF00", "#4472C4", "#FFC000"],
        xAxis: [
            { 
                // type: 'category',
                data: xAxisData,  // x轴数据
                axisPointer: { 
                    type: 'shadow'
                },
                axisLabel: { 
                    // inside: true, // x轴文字显示在柱状图内
                    // formatter: function (value) { 
                    // return value.split("").join("\n");
                    // },
                    textStyle: { 
                        fontSize: 9,
                        itemSize: '',
                        color: '#fff'
                    },
                    rotate: -30,  // x轴文字倾斜显示
                },
                axisLine: { 
                    // lineStyle: {color: '#37445A'} // x轴坐标轴颜色
                },
                // z: 10, // 显示优先级
                splitLine: {   // 网格线样式
                    show: false,
                    lineStyle: { 
                        color: ['#37445A'],
                        width: 1,
                        type: 'solid'
                    }
                }
            }
        ],
        yAxis: [
            { 
                type: 'value',
                name: '',
                min: 0,
                max: 20,
                // interval: 40,
                axisLabel: { 
                    formatter: '{value}',
                    textStyle: { 
                        color: '#fff'
                    }
                },
                axisLine: { 
                    // lineStyle: {color: '#fff'} // y轴坐标轴颜色
                },
                splitLine: { 
                    show: true,
                    lineStyle: { 
                        color: ['#37445A'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            { 
                type: 'value',
                name: '',
                min: 0,
                max: 20,
                // interval: 40,
                axisLabel: { 
                    formatter: '{value}',
                    textStyle: { 
                        color: '#fff'
                    }
                },
                axisLine: { 
                    // lineStyle: {color: '#fff'} // y轴坐标轴颜色
                },
                splitLine: { 
                    show: true,
                    lineStyle: { 
                        color: ['#37445A'],
                        width: 1,
                        type: 'solid'
                    }
                }
            }
        ],
        dataZoom: [  // 展示前10条数据
            { 
                type: 'inside',
                startValue: 0,
                endValue: 9
            }
        ],
        series: [
            { 
                name: '水质达标个数',
                type: 'line',
                yAxisIndex: 1,
                symbol: 'circle',     //设定为实心点
                symbolSize: 6,   //设定实心点的大小
                data: lineDataFirst
            },
            { 
                name: '水量达标个数',
                type: 'line',
                yAxisIndex: 1,
                symbol: 'circle',     //设定为实心点
                symbolSize: 6,   //设定实心点的大小
                data: lineDataSecond
            },
            { 
                name: '水质达标率',
                type: 'bar',
                itemStyle: {   //柱状图颜色渐变
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#079FF9'},
                            { offset: 0.5, color: '#0F76BC'},
                            { offset: 1, color: '#1A568A'}
                        ]
                    )
                },
                data: barDataFirst
            },
            { 
                name: '水量达标率',
                type: 'bar',
                barGap: '0%',  // 柱状图间距0
    		 itemStyle: { 
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            { offset: 0, color: '#D2AD29'},
                            { offset: 0.5, color: '#9C893F'},
                            { offset: 1, color: '#63634B'}
                        ]
                    )
                },
                data: barDataSecond
            },
        ]
    };
    this.drinkBarLine = this.$echarts.init(document.getElementById(id));
    // 页面刷时延迟加载，以便柱状图自适应父级div宽高
    setTimeout(() => {   
        this.drinkBarLine.resize();
    }, 500);
    this.drinkBarLine.setOption(option);
    
    // 鼠标点击，滚动，拖动柱状图展示所有数据
    var zoomSize = 6;
    let _this = this;
    this.drinkBarLine.on('click', function (params) { 
        _this.drinkBarLine.dispatchAction({ 
            type: 'dataZoom',
            startValue: xAxisData[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: xAxisData[Math.min(params.dataIndex + zoomSize / 2, (barDataFirst).length - 1)]
        });
    });

[20210228203149221.png]: /images/20221023/8b75c630a12943b882d488494b72143e.png

发表评论取消回复

表情：

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

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

相关阅读

相关 ECharts 同时显示柱状图和折线图

1 实现代码 <body> <div id="main" style="width: 600px;height:400px;"></div>

- 日理万妓/ 2023年10月05日 10:47/ 0 赞/ 26 阅读

相关 echarts仪表盘，柱状图，折线图，趋势图

系列文章目录文章目录系列文章目录前言一、仪表盘二、柱状图三、折线图四、趋势图 -----------------

小鱼儿/ 2023年09月26日 19:58/ 0 赞/ 153 阅读

相关 Echarts：10-7-1 折线图+柱状图

option = { title: { text: '折线图' }, tooltip: {

迈不过友情╰/ 2022年12月12日 13:46/ 0 赞/ 193 阅读

相关 echarts 柱状图

官网： https://echarts.apache.org/zh/tutorial.html 显示柱状图：[https://echarts.apache.org/

深碍√TFBOYSˉ_/ 2022年12月11日 04:28/ 0 赞/ 298 阅读

相关 ECharts实现折线图变柱状图、ECharts实现立体柱状图、3D柱状图，ECharts立体柱状图属性

> 本文借助该链接做演示：[链接地址][Link 1] 1.ECharts实现折线图变柱状图把series写的type改成“line”即可如图： ![在这里

比眉伴天荒/ 2022年11月19日 04:28/ 0 赞/ 642 阅读

相关 Echarts 柱状图及折线图

效果 ![柱状及折线图表][20210228203149221.png] 功能 1. 防止悬浮框溢出 2. 图例图标宽高度修改 3. 柱状图之间间距设置 4

Dear 丶/ 2022年11月03日 15:24/ 0 赞/ 230 阅读

相关 echarts柱状图顶端用折线图连接起来

效果： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL

蔚落/ 2022年09月11日 15:10/ 0 赞/ 329 阅读

相关 echarts折线图和双层柱状图结合绘制

效果： ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5Li

男娘i/ 2022年09月11日 07:28/ 0 赞/ 249 阅读

相关 echarts折线图和柱状图结合绘制

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5aSp5LiL54aZ5

阳光穿透心脏的1/2处/ 2022年09月11日 07:28/ 0 赞/ 386 阅读

相关 Echarts3实例柱状折线图

实现效果 ![70][] 知识点 Y轴垂直标题柱状折线联合使用代码实现 option = { title:

待我称王封你为后i/ 2021年09月16日 07:06/ 0 赞/ 485 阅读