echarts实现水波球和立体柱状图

最新推荐文章于 2024-09-19 16:45:05 发布
最新推荐文章于 2024-09-19 16:45:05 发布
阅读量921 收藏 6
点赞数 2
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40576178/article/details/126099391
版权

在这里插入图片描述

<template>
  <div class="sfgc-page">
    <div class="so2-box basic-box">
      <div class="title-box">
        <span>SO2排放量</span>
      </div>

      <div class="echart-box">
        <div class="left-box">
          <div class="echart" ref="chart11"></div>
        </div>
        <div class="right-box">
          <p>年度目标</p>
          <p>8.87 <em>万吨</em></p>
        </div>
      </div>

      <div class="bottom-box">
        <div class="echart" ref="chart12"></div>
      </div>
    </div>

    <div class="nox-box basic-box">
      <div class="title-box">
        <span>NOX排放量</span>
      </div>

      <div class="echart-box">
        <div class="left-box">
          <div class="echart" ref="chart21"></div>
        </div>
        <div class="right-box">
          <p>年度目标</p>
          <p>16.72 <em>万吨</em></p>
        </div>
      </div>

      <div class="bottom-box">
        <div class="echart" ref="chart22"></div>
      </div>
    </div>

    <div class="cod-box basic-box">
      <div class="title-box">
        <span>COD排放量</span>
      </div>

      <div class="echart-box">
        <div class="left-box">
          <div class="echart" ref="chart31"></div>
        </div>
        <div class="right-box">
          <p>年度目标</p>
          <p>0.39 <em>万吨</em></p>
        </div>
      </div>

      <div class="bottom-box">
        <div class="echart" ref="chart32"></div>
      </div>
    </div>

    <div class="air-box basic-box">
      <div class="title-box">
        <span>露天矿排土场复垦率</span>
      </div>

      <div class="echart-box">
        <div class="left-box">
          <div class="echart" ref="chart41"></div>
        </div>
        <div class="right-box">
          <p>年度目标</p>
          <p>100 <em>%</em></p>
        </div>
      </div>

      <div class="bottom-box">
        <div class="echart" ref="chart42"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chart11: null,
      chart12: null,

      chart21: null,
      chart22: null,

      chart31: null,
      chart32: null,

      chart41: null,
      chart42: null
    }
  },

  methods: {
    initChart11() {
      //销毁
      this.chart11 && this.$echarts.dispose(this.chart11)
      //基于准备好的dom,初始化echarts实例
      this.chart11 = this.$echarts.init(this.$refs.chart11)

      let chartOption11 = {
        title: {
          text: '3.13 万吨',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#fff',
            fontWeight: 'bold'
          },
          x: 'center',
          y: '45%'
        },

        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '65%',
            children: [
              {
                type: 'text',
                z: 100,
                // left: '100',
                // top: 'middle',
                style: {
                  fill: '#fff',
                  text: '排放量',
                  font: '33px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        // x轴
        xAxis: {
          show: false // 不显示
        },
        // y轴
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 18,
            color: '#d8bb93'
          }
        },
        grid: {},

        series: [
          {
            type: 'liquidFill',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(133, 94, 21,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(133, 94, 21,1)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(133, 94, 21,1)'
                  }
                ],
                globalCoord: false
              }
            ],
            radius: '85%', // 半径大小
            center: ['50%', '50%'], // 布局位置
            data: [13.22 / 16.76, 13.22 / 16.76], // 水球波纹值
            backgroundStyle: {
              color: 'rgba(0,0,0,0)' //背景颜色
            },
            outline: {
              // 轮廓设置
              show: true,
              borderDistance: 20, // 轮廓间距
              itemStyle: {
                borderColor: '#855e15', // 轮廓颜色
                borderWidth: 5, // 轮廓大小
                shadowBlur: 'none' // 轮廓阴影
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
      this.chart11.setOption(chartOption11, true)
      this.chart11 && this.chart11.resize()
    },
    resizeChart11() {
      this.chart11 && this.chart11.resize()
    },
    initChart12() {
      //销毁
      this.chart12 && this.$echarts.dispose(this.chart12)
      //基于准备好的dom,初始化echarts实例
      this.chart12 = this.$echarts.init(this.$refs.chart12)

      let chartOption12 = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#ffffff',
            fontSize: 30
          },
          formatter(params) {
            const item = params[1] || {}
            if (JSON.stringify(item) !== '{}') {
              return `
                  <div class='chart-tooltip'>
                    <span class='title'>${item.axisValueLabel}</span>
                    <span class='text'><span class='point'></span>${item.data}</span>
                  </div>`
            }
            return `暂无数据`
          }
        },

        grid: {
          containLabel: true
        },

        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年'],
            axisLine: { show: false },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 30,
              color: '#d9bb96',
              fontFamily: 'Microsoft YaHei',
              margin: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            nameTextStyle: {
              align: 'right',
              color: '#ffffff',
              fontSize: 8,
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              fontSize: 8,
              color: '#ffffff',
              fontFamily: 'Microsoft YaHei'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            //柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#c0eb59'
                  },
                  {
                    offset: 1,
                    color: '#c0eb59'
                  }
                ])
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 50,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: '#5f7d32'
                    },
                    {
                      offset: 1,
                      color: '#4b8425'
                    }
                  ]
                }
              }
            },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 50, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                color: '#d9bb96',
                fontSize: 30
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c0eb59'
                    },
                    {
                      offset: 1,
                      color: '#c0eb59'
                    }
                  ],
                  false
                )
              }
            },
            data: ['6.77', '6.58', '7.71']
          }
        ]
      }
      this.chart12.setOption(chartOption12, true)
      this.chart12 && this.chart12.resize()
    },
    resizeChart12() {
      this.chart12 && this.chart12.resize()
    },

    initChart21() {
      //销毁
      this.chart21 && this.$echarts.dispose(this.chart21)
      //基于准备好的dom,初始化echarts实例
      this.chart21 = this.$echarts.init(this.$refs.chart21)

      let chartOption21 = {
        title: {
          text: '7.3 万吨',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#fff',
            fontWeight: 'bold'
          },
          x: 'center',
          y: '45%'
        },

        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '65%',
            children: [
              {
                type: 'text',
                z: 100,
                // left: '100',
                // top: 'middle',
                style: {
                  fill: '#fff',
                  text: '排放量',
                  font: '33px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        // x轴
        xAxis: {
          show: false // 不显示
        },
        // y轴
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 18,
            color: '#d8bb93'
          }
        },
        grid: {},

        series: [
          {
            type: 'liquidFill',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(140, 30, 38,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(140, 30, 38,1)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(140, 30, 38,1)'
                  }
                ],
                globalCoord: false
              }
            ],
            radius: '85%', // 半径大小
            center: ['50%', '50%'], // 布局位置
            data: [13.22 / 16.76, 13.22 / 16.76], // 水球波纹值
            backgroundStyle: {
              color: 'rgba(0,0,0,0)' //背景颜色
            },
            outline: {
              // 轮廓设置
              show: true,
              borderDistance: 20, // 轮廓间距
              itemStyle: {
                borderColor: '#8c1e26', // 轮廓颜色
                borderWidth: 5, // 轮廓大小
                shadowBlur: 'none' // 轮廓阴影
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
      this.chart21.setOption(chartOption21, true)
      this.chart21 && this.chart21.resize()
    },
    resizeChart21() {
      this.chart21 && this.chart21.resize()
    },
    initChart22() {
      //销毁
      this.chart22 && this.$echarts.dispose(this.chart22)
      //基于准备好的dom,初始化echarts实例
      this.chart22 = this.$echarts.init(this.$refs.chart22)

      let chartOption22 = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#ffffff',
            fontSize: 30
          },
          formatter(params) {
            const item = params[1] || {}
            if (JSON.stringify(item) !== '{}') {
              return `
                  <div class='chart-tooltip'>
                    <span class='title'>${item.axisValueLabel}</span>
                    <span class='text'><span class='point'></span>${item.data}</span>
                  </div>`
            }
            return `暂无数据`
          }
        },

        grid: {
          containLabel: true
        },

        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年'],
            axisLine: { show: false },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 30,
              color: '#d9bb96',
              fontFamily: 'Microsoft YaHei',
              margin: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            nameTextStyle: {
              align: 'right',
              color: '#ffffff',
              fontSize: 8,
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              fontSize: 8,
              color: '#ffffff',
              fontFamily: 'Microsoft YaHei'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            //柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#c0eb59'
                  },
                  {
                    offset: 1,
                    color: '#c0eb59'
                  }
                ])
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 50,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: '#5f7d32'
                    },
                    {
                      offset: 1,
                      color: '#4b8425'
                    }
                  ]
                }
              }
            },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 50, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                color: '#d9bb96',
                fontSize: 30
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c0eb59'
                    },
                    {
                      offset: 1,
                      color: '#c0eb59'
                    }
                  ],
                  false
                )
              }
            },
            data: ['6.77', '6.58', '7.71']
          }
        ]
      }
      this.chart22.setOption(chartOption22, true)
      this.chart22 && this.chart22.resize()
    },
    resizeChart22() {
      this.chart22 && this.chart22.resize()
    },

    initChart31() {
      //销毁
      this.chart31 && this.$echarts.dispose(this.chart31)
      //基于准备好的dom,初始化echarts实例
      this.chart31 = this.$echarts.init(this.$refs.chart31)

      let chartOption31 = {
        title: {
          text: '0.13 万吨',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#fff',
            fontWeight: 'bold'
          },
          x: 'center',
          y: '45%'
        },

        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '65%',
            children: [
              {
                type: 'text',
                z: 100,
                // left: '100',
                // top: 'middle',
                style: {
                  fill: '#fff',
                  text: '排放量',
                  font: '33px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        // x轴
        xAxis: {
          show: false // 不显示
        },
        // y轴
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 18,
            color: '#d8bb93'
          }
        },
        grid: {},

        series: [
          {
            type: 'liquidFill',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(81, 86, 187,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(81, 86, 187,1)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(81, 86, 187,1)'
                  }
                ],
                globalCoord: false
              }
            ],
            radius: '85%', // 半径大小
            center: ['50%', '50%'], // 布局位置
            data: [13.22 / 16.76, 13.22 / 16.76], // 水球波纹值
            backgroundStyle: {
              color: 'rgba(0,0,0,0)' //背景颜色
            },
            outline: {
              // 轮廓设置
              show: true,
              borderDistance: 20, // 轮廓间距
              itemStyle: {
                borderColor: '#5156bb', // 轮廓颜色
                borderWidth: 5, // 轮廓大小
                shadowBlur: 'none' // 轮廓阴影
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
      this.chart31.setOption(chartOption31, true)
      this.chart31 && this.chart31.resize()
    },
    resizeChart31() {
      this.chart31 && this.chart31.resize()
    },
    initChart32() {
      //销毁
      this.chart32 && this.$echarts.dispose(this.chart32)
      //基于准备好的dom,初始化echarts实例
      this.chart32 = this.$echarts.init(this.$refs.chart32)

      let chartOption32 = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#ffffff',
            fontSize: 30
          },
          formatter(params) {
            const item = params[1] || {}
            if (JSON.stringify(item) !== '{}') {
              return `
                  <div class='chart-tooltip'>
                    <span class='title'>${item.axisValueLabel}</span>
                    <span class='text'><span class='point'></span>${item.data}</span>
                  </div>`
            }
            return `暂无数据`
          }
        },

        grid: {
          containLabel: true
        },

        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年'],
            axisLine: { show: false },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 30,
              color: '#d9bb96',
              fontFamily: 'Microsoft YaHei',
              margin: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            nameTextStyle: {
              align: 'right',
              color: '#ffffff',
              fontSize: 8,
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              fontSize: 8,
              color: '#ffffff',
              fontFamily: 'Microsoft YaHei'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            //柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#c0eb59'
                  },
                  {
                    offset: 1,
                    color: '#c0eb59'
                  }
                ])
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 50,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: '#5f7d32'
                    },
                    {
                      offset: 1,
                      color: '#4b8425'
                    }
                  ]
                }
              }
            },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 50, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                color: '#d9bb96',
                fontSize: 30
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c0eb59'
                    },
                    {
                      offset: 1,
                      color: '#c0eb59'
                    }
                  ],
                  false
                )
              }
            },
            data: ['6.77', '6.58', '7.71']
          }
        ]
      }
      this.chart32.setOption(chartOption32, true)
      this.chart32 && this.chart32.resize()
    },
    resizeChart32() {
      this.chart32 && this.chart32.resize()
    },

    initChart41() {
      //销毁
      this.chart41 && this.$echarts.dispose(this.chart41)
      //基于准备好的dom,初始化echarts实例
      this.chart41 = this.$echarts.init(this.$refs.chart41)

      let chartOption41 = {
        title: {
          text: '87.65 %',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#fff',
            fontWeight: 'bold'
          },
          x: 'center',
          y: '45%'
        },

        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '65%',
            children: [
              {
                type: 'text',
                z: 100,
                // left: '100',
                // top: 'middle',
                style: {
                  fill: '#fff',
                  text: '排放量',
                  font: '33px Microsoft YaHei'
                }
              }
            ]
          }
        ],

        // x轴
        xAxis: {
          show: false // 不显示
        },
        // y轴
        yAxis: {
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 18,
            color: '#d8bb93'
          }
        },
        grid: {},

        series: [
          {
            type: 'liquidFill',
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(81, 140, 30,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(81, 140, 30,1)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(81, 140, 30,1)'
                  }
                ],
                globalCoord: false
              }
            ],
            radius: '85%', // 半径大小
            center: ['50%', '50%'], // 布局位置
            data: ['0.8', '0.8'], // 水球波纹值
            backgroundStyle: {
              color: 'rgba(0,0,0,0)' //背景颜色
            },
            outline: {
              // 轮廓设置
              show: true,
              borderDistance: 20, // 轮廓间距
              itemStyle: {
                borderColor: '#518c1e', // 轮廓颜色
                borderWidth: 5, // 轮廓大小
                shadowBlur: 'none' // 轮廓阴影
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
      this.chart41.setOption(chartOption41, true)
      this.chart41 && this.chart41.resize()
    },
    resizeChart41() {
      this.chart41 && this.chart41.resize()
    },
    initChart42() {
      //销毁
      this.chart42 && this.$echarts.dispose(this.chart42)
      //基于准备好的dom,初始化echarts实例
      this.chart42 = this.$echarts.init(this.$refs.chart42)

      let chartOption42 = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#ffffff',
            fontSize: 30
          },
          formatter(params) {
            const item = params[1] || {}
            if (JSON.stringify(item) !== '{}') {
              return `
                  <div class='chart-tooltip'>
                    <span class='title'>${item.axisValueLabel}</span>
                    <span class='text'><span class='point'></span>${item.data}</span>
                  </div>`
            }
            return `暂无数据`
          }
        },

        grid: {
          containLabel: true
        },

        xAxis: [
          {
            type: 'category',
            data: ['2019年', '2020年', '2021年'],
            axisLine: { show: false },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 30,
              color: '#d9bb96',
              fontFamily: 'Microsoft YaHei',
              margin: 30
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            nameTextStyle: {
              align: 'right',
              color: '#ffffff',
              fontSize: 8,
              fontFamily: 'Microsoft YaHei'
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              fontSize: 8,
              color: '#ffffff',
              fontFamily: 'Microsoft YaHei'
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            //柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#c0eb59'
                  },
                  {
                    offset: 1,
                    color: '#c0eb59'
                  }
                ])
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 50,
            barGap: '0%',
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
                      //第一节下面
                      offset: 0,
                      color: '#5f7d32'
                    },
                    {
                      offset: 1,
                      color: '#4b8425'
                    }
                  ]
                }
              }
            },
            label: {
              show: true, // 开启显示
              position: 'top', // 在上方显示
              distance: 50, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              textStyle: {
                // 数值样式
                color: '#d9bb96',
                fontSize: 30
              }
            },
            data: ['6.77', '6.58', '7.71']
          },

          //柱顶圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [50, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#c0eb59'
                    },
                    {
                      offset: 1,
                      color: '#c0eb59'
                    }
                  ],
                  false
                )
              }
            },
            data: ['6.77', '6.58', '7.71']
          }
        ]
      }
      this.chart42.setOption(chartOption42, true)
      this.chart42 && this.chart42.resize()
    },
    resizeChart42() {
      this.chart42 && this.chart42.resize()
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart11()
      this.initChart12()
      this.initChart21()
      this.initChart22()
      this.initChart31()
      this.initChart32()
      this.initChart41()
      this.initChart42()
    })

    window.addEventListener('resize', this.resizeChart11)
    window.addEventListener('resize', this.resizeChart12)
    window.addEventListener('resize', this.resizeChart21)
    window.addEventListener('resize', this.resizeChart22)
    window.addEventListener('resize', this.resizeChart31)
    window.addEventListener('resize', this.resizeChart32)
    window.addEventListener('resize', this.resizeChart41)
    window.addEventListener('resize', this.resizeChart42)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeChart11)
    window.removeEventListener('resize', this.resizeChart12)
    window.removeEventListener('resize', this.resizeChart21)
    window.removeEventListener('resize', this.resizeChart22)
    window.removeEventListener('resize', this.resizeChart31)
    window.removeEventListener('resize', this.resizeChart32)
    window.removeEventListener('resize', this.resizeChart41)
    window.removeEventListener('resize', this.resizeChart42)
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sfgc-page {
  display: flex;
  width: 100%;
  height: 920px;
  //   background-color: red;

  ::v-deep .chart-tooltip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2px 4px;
    .title {
      padding: 0 !important;
      margin: 0 !important;
      background: none !important;
      margin-bottom: 6px !important;
    }
    .text {
      display: flex;
      align-items: center;
      .point {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #428720;
        margin-right: 6px;
      }
    }
  }

  .basic-box {
    position: relative;
    width: 750px;
    height: 100%;
    padding-left: 10px;
    // user-select: none;
    // background-color: #fff;

    .echart {
      width: 100%;
      height: 100%;
    }

    .title-box {
      width: 100%;
      height: 10%;
      font-size: 40px;
      padding-left: 30px;
      font-weight: 700;
      //   background-color: red;
    }

    .echart-box {
      display: flex;
      width: 100%;
      height: 45%;
      padding-left: 40px;
      //   background-color: green;

      .left-box {
        flex-shrink: 0;
        width: 55%;
        height: 100%;
        // background-color: #fff;
      }

      .right-box {
        flex-shrink: 0;
        width: 45%;
        height: 100%;
        padding-top: 120px;
        padding-left: 20px;
        // background-color: #fff;

        p {
          &:nth-child(1) {
            font-size: 40px;
            margin-bottom: 25px;
          }

          &:nth-child(2) {
            font-size: 70px;
            color: #fff;
            font-weight: 700;

            em {
              font-size: 35px;
              font-weight: normal;
            }
          }
        }
      }
    }

    .bottom-box {
      width: 100%;
      height: 45%;
      //   background-color: blue;
    }
  }

  .so2-box {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 850px;
      background-color: #d9bb95;
    }
  }

  .nox-box {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 850px;
      background-color: #d9bb95;
    }
  }

  .cod-box {
    &::after {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 850px;
      background-color: #d9bb95;
    }
  }

  .air-box {
    background-color: transparent;
  }
}
</style>
风向北吹i
关注
Echarts实现柱状折线图、水波球、雷达图、仪表盘、漏斗图、数据标注、数据标线、标域/标线
weixin_44389116的博客
07-07 440
Echarts实现柱状折现图、水波球、雷达图、仪表盘、漏斗图、数据标注、数据标线、标域/标线
echart 水柱图
M_Limeng的博客
10-27 817
标题效果图 mounted(){ this.setflow("flow","#104277","#58A2F0","#8BD7FF",0.5); }, methods:{ setflow(vessel,bgcolor,bgcolor2,bgcolor3,val){ var chartDom = document.getElementById(vessel); var myChart = this.$echarts.init(chartDom); var opt
echarts三联水球图
最新发布
qq_44699269的博客
09-19 561
echarts三联水球图
js统计相关 柱状图，饼图，波浪图
04-08
js统计相关 柱状图，饼图，波浪图
一款简单好用的图表库，目前有柱状，线状，饼图，波浪图类型
qq_19660399的博客
09-11 1816
A simple chart library for iOS , contains barChart, lineChart, pieChart, waveChart. Thanks for your star if you like. 模仿PNChart写的一个图表库，用法简单，暂时有柱状图，线状图，饼图，波浪图四种类型，带动画效果，后续可能会更新新的类型，喜欢的欢迎star一个，有任何建议
echarts 单独实现水波纹涟漪效果
热门推荐
萝卜芹菜芽
08-14 1万+
效果： 上代码可以直接在 echarts 示例中运行 ( 建立在直角系中 )：var option = { xAxis : [ { boundaryGap:false, type : 'category', splitLine:{ show:false
echarts画立体圆柱形图表
裤兜的博客
11-15 2969
option = { xAxis: { type: 'category', data: ['A区', 'B区', 'C区', 'D区', 'E区', 'F区', 'G区'], axisLine: { lineStyle: { color: '#2063A8' } }, axisTick: { show: false }, axisLabel: { color: '#EFF2F9',
vue3+echarts 绘制3d圆柱形图
lbchenxy的博客
12-08 5093
今天得到了这样一个需求，用echarts绘制一个圆柱形图，如下图 经过度娘指导发现了一遍类似博客 剩下的就不难了，按照这个思路去修改实现就可以了，废话少说上代码 option = { grid: { left: '0', top: '15', right: '0', bottom: '10', containLabel: true }, animation: false, xAxis: { data: ['服务数', '运行Pod数', '运
echarts 地图散点发光涟漪效果
02-03
它支持多种图表类型，包括柱状图、折线图、饼图以及地图等。在本项目中，我们将探讨如何利用 ECharts 实现一个富有动态效果的“地图散点发光涟漪效果”。 1. **ECharts 地图组件** ECharts 提供了丰富的地图模板，...
echarts自定义封装js【柱状图，折线图，水球，雷达，仪表盘】以上图表的各种问题，几乎都有，没有的评论区留言
qq_38687592的博客
12-01 794
echarts【圆柱体柱状图渐变色，折线图自定义，水球水波球，雷达自定义，仪表盘自定义】x轴name显示不全，柱状图隔一个不同色...echarts各种问题
echarts vue 酷炫图_GitHub - d3lin/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
weixin_28848739的博客
12-23 353
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。项目中部分前端库采用外部CDN引入，可以减少打包文件体积，加快页面渲染。可视化数据大屏展示对前端性能要求高，建议使用谷歌浏览器查看或开发，屏幕尺寸为1920px宽和1080px高是最佳效果。目前制作数据可视化大屏，前端比较流...
echarts波浪百分比图表代码
06-24
echarts波浪百分比图表代码是一款基于echarts.js实现的酷炫3D圆形波浪图表特效。
封装echarts组件——vue中，波浪效果展示数据
weixin_44867717的博客
06-05 704
波浪显示数据
Echarts中的水位图（水波图、水球图、水半球）实现的详细步骤
zzz1780340的博客
05-30 3072
之后关于echarts的内容应该会写很多，因为在平常工作中每一个项目中必做echarts图。今天写一下关于echarts中的水位图，或者就水波图先看效果看起来还是很不错的。
01- Echarts 图形配置之：扩展水波图(水球图、水半球)liquidFill。
youyudehan的博客
02-01 6368
简单理解Echarts 中 liquidFill 水波图配置，提供简单示例，以及个别示例代码。
echarts 实现动态水波图
m0_61043829的博客
06-28 1775
echarts 实现动态水波图
echarts水波球
冷雨温喉的博客
09-29 1981
水波球是一个插件型的图表，echarts官网的js并没有包含水波球的内容，需要单独下载js https://github.com/ecomfe/echarts-liquidfill 这里下载完打开dist里边的echarts-liquidfill.min.js复制到自己的项目里 var liquidFill1 = document.getElementById('pjxysc'); myLiquidFill1 = echarts.init(liquidFill1);
vue项目-圆柱状水波效果实现
不定时分享最优质的网络技术与教程，满满的干货。
12-25 475
复制代码。
用echarts实现柱形图、折线图、堆积图的闪烁效果
Jack_13201的博客
08-23 730
一：看效果 二：代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值