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

小鱼儿 2023-09-26 19:58 85阅读 0赞

## 系列文章目录 ##

#### 文章目录 ####

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

--------------------

## 前言 ##

//解决页面刷新canvas画布变大
        async loadEcharts(id) {
        
          var myChart = echarts.init(document.getElementById(id))
          myChart.resize() // 精髓之所在
        },

--------------------

`提示：以下是本篇文章正文内容，下面案例可供参考`

## 一、仪表盘 ##

![在这里插入图片描述][3dbdf34d7d4248199c1e14f14491cd43.png]

<a-row>
                    <a-col span="6">
                      <div id="generation" class="dashboard"></div>
                    </a-col>
                    <a-col span="6">
                      <div id="in-come" class="dashboard"></div>
                    </a-col>
    </a-row>
    
    this.showGenerationCharts(
            'generation',
            'V',
            '累计发电量',
            this.roomDetail.countQuantity,
          )
          this.showIncomeCharts(
            'in-come',
            '元',
            '累计发电金额',
            this.roomDetail.countProfit,
          )
    
    //累计发电量仪表盘
        showGenerationCharts(id, unit, name, value) {
        
          this.loadEcharts(id)
          this.myChart2 = echarts.init(document.getElementById(id))
          this.option2 = {
        
            tooltip: {
        
              formatter: '{b} : {c}kwh',
            },
            series: [
              {
        
                name: name,
                type: 'gauge',
                min: 0, //起始最小刻度值
                max: 0, //最大刻度值
                splitNumber: 8, //分隔份数
                radius: '95%',
                startAngle: 180, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。默认 225
                endAngle: 0, // 仪表盘结束角度。默认 -45
                title: {
        
                  show: true,
                  fontSize: 20,
                  offsetCenter: [0, 55],
                },
                detail: {
        
                  formatter: '{value}' + unit,
                  offsetCenter: [0, 35],
                  textStyle: {
        
                    fontSize: 16,
                    color: 'rgba(10,133,232,0.9)',
                  },
                },
                pointer: {
        
                  //指针样式
                  length: '45%',
                },
                data: [
                  {
        
                    value: value,
                    name: name,
                  },
                ],
                axisLine: {
        
                  show: true,
                  lineStyle: {
        
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
        
                            offset: 0.1,
                            color: '#FFC600',
                          },
                          {
        
                            offset: 0.6,
                            color: '#30D27C',
                          },
                          {
        
                            offset: 1,
                            color: '#0B95FF',
                          },
                        ]),
                      ],
                    ],
                    width: 25,
                  },
                },
                axisTick: {
        
                  // show:false,
                  length: -5,
                  splitNumber: 5,
                  distance: -30,
                  lineStyle: {
        
                    color: '#69b3ec',
                  },
                },
                splitLine: {
        
                  length: -10,
                  distance: -30, // 分隔线与轴线的距离。
                  lineStyle: {
        
                    color: '#69b3ec',
                  },
                },
                axisLabel: {
        
                  show: false,
                  distance: 5, //文字离表盘的距离
                  fontSize: 10,
                },
              },
            ],
          }
          setTimeout(() => {
        
            this.myChart2.setOption(this.option2)
            this.myChart2.resize()
          }, 100)
          window.addEventListener('resize', () => {
        
            this.myChart2.resize()
          })
        },
        //累计发电金额仪表盘
        showIncomeCharts(id, unit, name, value) {
        
          this.loadEcharts(id)
          this.myChart3 = echarts.init(document.getElementById(id))
          this.option3 = {
        
            tooltip: {
        
              formatter: '{b} : {c}万元',
            },
            series: [
              {
        
                name: name,
                type: 'gauge',
                min: 0, //起始最小刻度值
                max: 0, //最大刻度值
                splitNumber: 8, //分隔份数
                radius: '95%',
                startAngle: 180, // 仪表盘起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。默认 225
                endAngle: 0, // 仪表盘结束角度。默认 -45
                title: {
        
                  show: true,
                  offsetCenter: [0, 55],
                  textStyle: {
        
                    fontSize: 20,
                  },
                },
                detail: {
        
                  formatter: '{value}' + unit,
                  offsetCenter: [0, 35],
                  textStyle: {
        
                    fontSize: 16,
                    color: 'rgba(10,133,232,0.9)',
                  },
                },
                pointer: {
        
                  shadowColor: '#fd0808',
                  shadowBlur: 10,
                  //指针样式
                  length: '45%',
                },
                data: [
                  {
        
                    value: value,
                    name: name,
                  },
                ],
                axisLine: {
        
                  show: true,
                  lineStyle: {
        
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                          {
        
                            offset: 0.1,
                            color: '#FFC600',
                          },
                          {
        
                            offset: 0.6,
                            color: '#30D27C',
                          },
                          {
        
                            offset: 1,
                            color: '#0B95FF',
                          },
                        ]),
                      ],
                    ],
                    width: 25,
                  },
                },
                axisTick: {
        
                  // show:false,
                  length: -5,
                  splitNumber: 5,
                  distance: -30,
                  lineStyle: {
        
                    color: '#69b3ec',
                  },
                },
                splitLine: {
        
                  length: -10,
                  distance: -30, // 分隔线与轴线的距离。
                  lineStyle: {
        
                    color: '#69b3ec',
                  },
                },
                axisLabel: {
        
                  show: false,
                  distance: 5, //文字离表盘的距离
                  fontSize: 10,
                },
              },
            ],
          }
          setTimeout(() => {
        
            this.myChart3.setOption(this.option3)
            this.myChart3.resize()
          }, 100)
          window.addEventListener('resize', () => {
        
            this.myChart3.resize()
          })
        },
    
    
    .dashboard {
        
        height: 200px;
        margin-right: 10px;
      }

## 二、柱状图 ##

![在这里插入图片描述][c7441584e6994003bc0f2b86c7ff48ad.png]

> 代码如下（示例）：

<a-col span="12" style="width:50%">
              <a-card class="card">
                <div class="card-title">站点近24小时发电量小时分布</div>
                <div id="Generation-hour"></div>
              </a-card>
    </a-col>
    
    this.showGenerationDistribute()
    
    
    //详情站点近24小时发电量小时分布
        showGenerationDistribute() {
        
          this.loadEcharts('Generation-hour')
          var myChart = echarts.init(document.getElementById('Generation-hour'))
          var option = {
        
            legend: {
        
              data: ['发电量', '节电金额'],
              right: '50%',
              itemWidth: 14, // 图例图形宽度
              itemHeight: 14, // 图例图形高度
            },
            tooltip: {
        
              trigger: 'axis',
              axisPointer: {
        
                label: {
        
                  type: 'shadow',
                },
              },
            },
            xAxis: {
        
              data: this.powerGenerationDistribution.xData,
              axisLabel: {
        
                interval: 0,
                rotate: 45,
              },
              axisLine: {
         show: true },
              splitLine: {
         show: false },
              splitArea: {
         show: false },
              axisTick: {
         show: false },
            },
            yAxis: [
              {
        
                name: '单位：kWh',
                type: 'value',
                axisLabel: {
        
                  formatter: '{value} ',
                },
                splitLine: {
         show: false },
                axisLine: {
         show: false },
                splitArea: {
         show: false },
                axisTick: {
         show: false },
              },
              {
        
                name: '单位：元',
                type: 'value',
                axisLabel: {
        
                  formatter: '{value} ',
                },
                splitLine: {
         show: false },
                axisLine: {
         show: false },
                splitArea: {
         show: false },
                axisTick: {
         show: false },
              },
            ],
            grid: {
        
              top: '15%',
              left: '4%',
              right: '8%',
              bottom: '20%',
            },
            series: [
              {
        
                name: '节电金额',
                type: 'bar',
                barWidth: '50%',
                yAxisIndex: 0,
                z: 2,
                itemStyle: {
        
                  color: '#FDA33A',
                  barBorderRadius: [8, 8, 0, 0],
                },
                data: this.powerGenerationDistribution.saveMoneyList,
              },
    
              {
        
                name: '发电量',
                yAxisIndex: 1,
                type: 'bar',
                barWidth: '30%',
                barGap: '-80%',
                itemStyle: {
        
                  color: '#46D4FF',
                  barBorderRadius: [4, 4, 0, 0],
                },
                data: this.powerGenerationDistribution.powerGenerationList,
              },
            ],
          }
          setTimeout(() => {
        
            myChart.setOption(option)
            myChart.resize()
          }, 100)
          window.addEventListener('resize', () => {
        
            myChart.resize()
          })
        },
    
    #Generation-hour {
          
        height: 300px;
        width: 100%;
      }

## 三、折线图 ##

![在这里插入图片描述][127437feb954482ea4c9014f2054111e.png]

代码如下（示例）：

<a-col span="12" style="width:50%">
              <a-card class="card">
                <div class="card-title">
                  站点近24小时功率和电价趋势
                </div>
                <div id="power-price"></div>
              </a-card>
    </a-col>
    
    this.showPowerPriceDistribute()
    
    //详情站点近24小时功率和电价趋势
        showPowerPriceDistribute() {
        
          this.loadEcharts('power-price')
          var myChart = echarts.init(document.getElementById('power-price'))
          var option = {
        
            legend: {
        
              data: ['电价', '功率'],
              right: '10%',
            },
            tooltip: {
        
              trigger: 'axis',
              axisPointer: {
        
                type: 'line',
                lineStyle: {
        
                  color: '#085DFF',
                  width: 1,
                  shadowColor: '#085DFF',
                  opacity: 0.4,
                },
                label: {
         show: false },
              },
            },
            xAxis: {
        
              type: 'category',
              axisTick: {
        
                show: false, // 是否显示坐标轴轴线
              },
              boundaryGap: true,
              data: this.strHour,
              axisLabel: {
        
                interval: 0,
                rotate: 40,
              },
              axisLine: {
         onZero: true },
              splitLine: {
         show: false },
              splitArea: {
         show: false },
            },
            yAxis: [
              {
        
                name: '功率(kw)',
                type: 'value',
                scale: true,
                axisLabel: {
        
                  //坐标轴刻度标签的相关设置。
                  show: true,
                  textStyle: {
        
                    color: '#737373',
                  },
                },
                splitLine: {
        
                  lineStyle: {
        
                    color: 'rgba(131,101,101,0.2)',
                    type: 'dashed',
                  },
                },
              },
              {
        
                name: '电价(元)',
                type: 'value',
              },
            ],
            grid: {
        
              top: '20%',
              left: '8%',
              right: '8%',
              bottom: '20%',
            },
            series: [
              {
        
                name: '功率',
                type: 'line',
                stack: 'two',
                itemStyle: {
        
                  normal: {
        
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
        
                        offset: 0,
                        color: '#2185ec', // 0% 处的颜色
                      },
                      {
        
                        offset: 1,
                        color: '#fafdff', // 100% 处的颜色
                      },
                    ]), //背景渐变色
                    lineStyle: {
        
                      // 系列级个性化折线样式
                      width: 2,
                      type: 'solid',
                      color: '#4aa3ff',
                    },
                    areaStyle: {
        
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
        
                          offset: 0,
                          color: '#2185ec', // 0% 处的颜色
                        },
                        {
        
                          offset: 1,
                          color: '#fafdff', // 100% 处的颜色
                        },
                      ]), //背景渐变色
                    },
                  },
                },
                data: this.power,
              },
              {
        
                name: '电价',
                type: 'line',
                stack: 'three',
                step: 'middle',
                yAxisIndex: 1,
                itemStyle: {
        
                  normal: {
        
                    color: '#EB1532',
                  },
                  emphasis: {
        
                    color: '#4aa3ff',
                    lineStyle: {
        
                      // 系列级个性化折线样式
                      width: 1,
                      type: 'dotted',
                      color: '#4aa3ff', //折线的颜色
                    },
                  },
                },
                data: this.price,
              },
            ],
          }
          setTimeout(() => {
        
            myChart.setOption(option)
            myChart.resize()
          }, 100)
          window.addEventListener('resize', () => {
        
            myChart.resize()
          })
        },
    
    #power-price {
          
        height: 300px;
        width: 100%;
      }

--------------------

## 四、趋势图 ##

![在这里插入图片描述][5d7369f21b9e45488e7d902b8156582d.png]

<a-row class="h50" style="width:100%">
            <a-col span="24">
              <a-card class="card">
                <div class="card-title">站点近24小时电压趋势</div>
                <div id="voltage-trend"></div>
              </a-card>
            </a-col>
    </a-row>
    
    this.showVoltageTrend()
    
    //电压趋势
        showVoltageTrend() {
        
          this.loadEcharts('voltage-trend')
          var myChart = echarts.init(document.getElementById('voltage-trend'))
          var option = {
        
            tooltip: {
        
              show: true,
              trigger: 'item',
            },
            legend: {
        
              // data: ['电压'],
              left: '10%',
            },
            grid: {
        
              top: '10%',
              left: '5%',
              right: '5%',
              bottom: '10%',
            },
            xAxis: [
              {
        
                type: 'category',
                data: this.voltageTrend.xData,
                axisTick: {
        
                  show: false, // 是否显示坐标轴轴线
                },
                axisLabel: {
        
                  color: '#282828',
                  interval: 2,
                  rotate: 40,
                },
                splitLine: {
        
                  show: false,
                },
                boundaryGap: true,
                axisLine: {
        
                  //坐标轴轴线相关设置。
                  show: true,
                  inside: false,
                  lineStyle: {
        
                    color: '#000',
                  },
                },
              },
            ],
            yAxis: {
        
              type: 'value',
              name: '电压：V',
              scale: true,
              axisLabel: {
        
                //坐标轴刻度标签的相关设置。
                show: true,
                textStyle: {
        
                  color: '#737373',
                },
              },
              splitLine: {
        
                lineStyle: {
        
                  color: 'rgba(131,101,101,0.2)',
                  type: 'dashed',
                },
              },
            },
            series: [
              {
        
                // name: '电压',
                type: 'line',
                zlevel: 10,
                data: this.voltageTrend.voltageData,
                itemStyle: {
        
                  normal: {
        
                    //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
        
                        offset: 0,
                        color: '#2185ec', // 0% 处的颜色
                      },
                      {
        
                        offset: 1,
                        color: '#fafdff', // 100% 处的颜色
                      },
                    ]), //背景渐变色
                    lineStyle: {
        
                      // 系列级个性化折线样式
                      width: 2,
                      type: 'solid',
                      color: '#4aa3ff',
                    },
                    areaStyle: {
        
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
        
                          offset: 0,
                          color: '#2185ec', // 0% 处的颜色
                        },
                        {
        
                          offset: 1,
                          color: '#fafdff', // 100% 处的颜色
                        },
                      ]), //背景渐变色
                    },
                  },
                  emphasis: {
        
                    color: '#4aa3ff',
                    lineStyle: {
        
                      // 系列级个性化折线样式
                      width: 1,
                      type: 'dotted',
                      color: '#4aa3ff', //折线的颜色
                    },
                  },
                }, //线条样式
              },
            ],
          }
          setTimeout(() => {
        
            myChart.setOption(option)
            myChart.resize()
          }, 100)
          //echart 跟随屏幕自适应--防抖
          window.addEventListener('resize', function() {
        
            setTimeout(() => {
        
              myChart.resize()
            }, 2000)
          })
        },
    
    
    #voltage-trend {
        
        height: 300px;
        width: 100%;
      }

[3dbdf34d7d4248199c1e14f14491cd43.png]: https://img-blog.csdnimg.cn/3dbdf34d7d4248199c1e14f14491cd43.png
[c7441584e6994003bc0f2b86c7ff48ad.png]: https://img-blog.csdnimg.cn/c7441584e6994003bc0f2b86c7ff48ad.png
[127437feb954482ea4c9014f2054111e.png]: https://img-blog.csdnimg.cn/127437feb954482ea4c9014f2054111e.png
[5d7369f21b9e45488e7d902b8156582d.png]: https://img-blog.csdnimg.cn/5d7369f21b9e45488e7d902b8156582d.png