Echarts 仪表盘实现代码解析与监听浏览器视图大小等比例缩放Echarts图

在学习的阿旺

已于 2022-02-14 11:12:36 修改

阅读量996

点赞数

分类专栏： Echarts 文章标签： echarts javascript 前端

于 2022-02-14 11:08:42 首次发布

本文链接：https://blog.csdn.net/weixin_48163734/article/details/122920390

版权

本文介绍了如何使用Echarts创建仪表盘，并详细解析了代码实现过程。同时，文章探讨了如何监听浏览器视图大小变化，确保Echarts图表进行等比例缩放，保持视觉效果的一致性。

摘要由CSDN通过智能技术生成

仪表盘实现

效果图
在这里插入图片描述

var myChart = echarts.init(chartDom);
        var option;
        option = {
   
            // tooltip: {
   
            //     formatter: '{a} <br/>{b} : {c}%'
            // },
            series: [
                {
   
                    type: 'gauge', // 仪表盘
                    axisLine: {
    // 是否显示仪表盘线轴
                        show: true,
                        roundCap: true, // 起始都是圆顶
                        lineStyle: {
   
                            width: 15,
                            color: [[1, '#DDE8F2']]
                        }
                    },
                    // itemStyle: { // 自定义渐变色
                    //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //     { offset: 0, color: '#297FFE' }, //柱图渐变色
                    //     { offset: 1, color: '#08E5FF' } //柱图渐变色
                    //   ]),
                    //   shadowColor: '#297FFE',
                    //   shadowBlur: 10,
                    //   shadowOffsetX: 2,
                    //   shadowOffsetY: 2
                    // },