使用echarts仪表盘+柱形图+饼图实现数据可视化

最新推荐文章于 2024-09-14 13:46:25 发布

江南小雪

最新推荐文章于 2024-09-14 13:46:25 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_38655872/article/details/119539884

版权

本文记录了使用echarts在前端实现仪表盘、柱形图和饼图的数据可视化过程。在第一模块中，详细介绍了仪表盘的创建步骤，包括图表容器设置和初始化。第二模块讲解了如何配置饼图，特别是如何处理颜色固定的需求。第三模块讨论了柱形图的特殊需求，如双刻度和垂直X轴文字。最后展示了所有图表的最终渲染效果。

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

最近公司有个需求，使用echarts仪表盘+柱形图+饼图实现数据可视化，现在功能已经完成，在此做个总结，记录这几天的开发成果。

🎬第一模块：仪表盘

1、写好图表容器，设置宽高样式

<div id="areaChart"></div>

#areaChart,#percentChart,#projectPerChart,#outerChart,#modeAreaChart{
   width: 100%;
} 
#areaChart{
   height: 260px;
   margin-bottom: 30px;
 }

2、仪表盘初始化以及图表配置项

initAreaChart () {
      var chartDom = document.getElementById('areaChart')
      var myChart = echarts.init(chartDom)
      var option = {
        title: { // 标题
          text: '在管项目数',
          x: 'center',
          textStyle: {  // 标题样式
            color: '#17D1FF',
            fontWeight: 500,
            fontSize: 14
          },
          textAlign: 'left'  // 标题居中
        },
        tooltip: {
          show: true
        },
        series: [
          {
            name: '在管项目数',
            type: 'gauge',  // 仪表盘类型
            detail: {
              fontSize: 16
            },
            data: [{value: this.total.projectCount, name: ''}],//仪表盘数据，接口返回          
            max: 5000,  // 仪表盘最大值
            radius: '90%',  // 仪表盘占比容器大小
            center: ['50%', '57%'],  // 仪表盘位置
            axisLine: { 
              lineStyle: {  // 仪表盘轴线颜色
                color: [[this.total.projectCount / 5000, '#2CDD79'], [1, '#D3D3D4']],
                width: 20 // 修改轴线宽度
              }
            },
            splitLine: {  // 仪表盘刻度长度
              length: 20
            },
            axisLabel: {  // 仪表盘刻度字体大小
              fontSize: 10
            }
          }
        ]
      }
      myChart.setOption(option)
    }

3、进入页面时调用，生成仪表盘