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

系列文章目录

---

前言

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站，这篇文章男女通用，看懂了就去分享给你的码吧。

---

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

---

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

一、仪表盘

<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;
  }

二、柱状图

代码如下（示例）：

<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%;
  }

三、折线图

代码如下（示例）：

<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%;
  }

---

四、趋势图

<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%;
  }