Echarts 柱状图折线图混合样式

echarts yekong 100℃

Echarts 柱状图折线图混合样式

<template>
  <div class="echarts1" ref="echarts1">

  </div>
</template>

<script>
export default {
  name: 'echarts1',
  components: {},
  data () {
    return {}
  },
  watch: {},
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts1)
      const dataX = [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
      ]
      const dataBar = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
      const dataNowY = [23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33]
      const dataNowY2 = [20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30, 20, 33, 44, 66, 22, 23, 43, 33, 23, 58, 40, 30]
      var option = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          axisPointer: {
            lineStyle: {
              color: 'rgba(0,133,255,0)',
            },
          },
        },
        legend: {
          right: '20',
          top: 0,
          data: ['上线准确率', '上线有效率', '均方差考核水量'],
          itemGap: 15,
          itemWidth: 15,
          itemHeight: 10,
          textStyle: {
            color: 'rgba(168, 230, 243, 1)',
            fontSize: 14
          },
        },
        grid: {
          top: '60',
          right: '25',
          bottom: '10%',
          left: '25',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: ['0', '20%'],
          data: dataX,
          axisLine: {
            show: true,
            textStyle: {
              color: 'rgba(23, 40, 82, 1)',
              fontSize: 14
            },
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(168, 230, 243, 1)',
              fontSize: 14
            },
          },
          axisTick: {
            show: false, // 去除刻度线
          },
        },
        yAxis: [
          {
            type: 'value',
            // boundaryGap: ['0', '20%'],
            name: '产水',
            nameTextStyle: {
              color: 'rgba(168, 230, 243, 1)',
              fontSize: 14,
              padding: [0, 0, 0, -40]
            },
            axisLabel: {
              textStyle: {
                color: 'rgba(168, 230, 243, 1)',
                fontSize: 14
              },
            },
            axisTick: { show: false },
            axisLine: {
              show: true,
              textStyle: {
                color: 'rgba(168, 230, 243, 1)',
                fontSize: 14
              },
            },
            splitLine: { show: false },
          },
          {
            type: 'value',
            name: '配注',
            nameTextStyle: {
              color: 'rgba(168, 230, 243, 1)',
              fontSize: 14,
              padding: [0, 0, 0, 40]
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(168, 230, 243, 1)',
                fontSize: 14,
              },
            },
            boundaryGap: ['0', '20%'],
            axisTick: { show: true },
            axisLine: {
              show: true,
              textStyle: {
                color: 'rgba(23, 40, 82, 1)',
                fontSize: 14
              },
            },
            splitLine: { show: false },

          },
        ],
        series: [
          {
            name: 'Max',
            type: 'bar',
            barGap: '-100%',
            barWidth: '40%',
            silent: true,
            symbol:
              'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                color: 'rgba(17, 44, 111, 0.2)'
              }
            },
            data: [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600],
            z: 9,
            tooltip: {
              show: false,
            },
          },
          {
            name: '',
            type: 'bar',
            barWidth: '40%',
            stack: 'one',
            labelLine: {
              show: false,
              lineStyle: {
                color: 'transparent',
              },
            },
            itemStyle: {
              color: 'transparent',
            },
            tooltip: {
              show: false,
            },
            data: [80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80, 80],
          },
          {
            name: '均方差考核水量',
            type: 'bar',
            barWidth: '40%',
            stack: 'one',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(3, 167, 240, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(17, 44, 111, 1)'
                },
              ]),
            },
            data: dataBar,
          },
          {
            name: '上线准确率',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbolSize: 1,
            // 设置拐点颜色以及边框
            itemStyle: {
              color: 'rgba(0,133,255,1)',
            },
            data: dataNowY,
          },
          {
            name: '上线有效率',
            type: 'line',
            yAxisIndex: 1,
            symbolSize: 1,
            smooth: true,
            itemStyle: {
              color: '#CA8216',
            },
            data: dataNowY2,
          },
        ],
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 0px);
}
</style>

喜欢 (1)