Vue+echart realizes double column chart

This article shares the specific code of vue+echart to realize the double column chart for your reference. The specific content is as follows

Effect picture:

1. Installation

The recommended version is "echarts": "^4.8.0". If it is other than echarts, init will report an error.

1. First, you need to install the echarts dependency package

npm install --save [email protected]

2. Or use the domestic Taobao mirror:

npm install -g cnpm --registry=https://registry.npm.taobao.org

<template>
  <div class="echarts_con">
    <div
      class="echarts_main"
      ref="dialog_root"
      title="Node indicators"
      @close="hideData()"
    >
      <!--Load Condition-->
      <div
        ref="bar_dv"
        :style="{
          width: '100%',
          minHeight: '300px',
        }"
      ></div>
    </div>
  </div>
</template>
 
<script>
import echarts from 'echarts'
// import myIcon from './image/hot_icon.png' // custom icon // import averageIcon from './image/hot_icon.png'
export default {
  name: "Echarts",
  data () {
    return {
      maxStr: 400,
      yInterval: 80,
      myData: [122, 45, 67, 78, 46],
      averageData: [32, 34, 6, 73, 84, 40]
    }
  },
  //If data is passed in from outside, you need to monitor the data start
  // props: {
  // myData: {
  // type: Array,
  // default: []
  // },
  // averageData: {
  // type: Array,
  // default: []
  // }
  // },
  // computed: {
  // address () {
  // const { myData, averageData } = this
  // return {
  // myData,
  // averageData
  // }
  // }
  // },
  // watch: {
  // address: {
  // handler: function (val) {
  // this.compare(val.myData, val.averageData)
  // let newArr = val.myData.concat(val.averageData)
  // let maxNum = Math.max(...newArr)
  // this.maxStr = maxNum
  // if (maxNum >= 500) {
  // this.yInterval = 200
  // } else {
  // this.yInterval = 50
  // }
  // this.drawLine(val.myData, val.averageData)
  // },
  // deep: true

  // }
  // },
  // mounted () {
  // this.$nextTick(function () {
  // this.drawLine();
  // });
  // },
  //If data is passed in from outside, you need to monitor the data end

  mounted () {
    this.drawLine(this.myData, this.averageData)
  },
  methods: {
    //If the one-to-one corresponding data is lower than the average, then prompt compare (arr1, arr2) {
      if (arr1[0] < arr2[0]) {
        this.isCompare = true
      } else if (arr1[1] < arr2[1]) {
        this.isCompare = true
      } else if (arr1[2] < arr2[2]) {
        this.isCompare = true
      } else if (arr1[3] < arr2[3]) {
        this.isCompare = true
      } else {
        this.isCompare = false
      }
    },
    clickClose () {
      this.isCompare = false
    },
    /*Load status icon*/
    drawLine(a, b) {
      var myData = a;
      var averageData = b;
      let bar_dv = this.$refs.bar_dv;
      let myChart = echarts.init(bar_dv);
      var autoHeight = parseInt(this.maxStr / 100) * 10 + 100;
      myChart.getDom().style.height = autoHeight + "px";
      myChart.resize(); //Adaptive height // Draw chart myChart.setOption({
        title: { text: 'Report display' },
        grid: {
          // left: 40,
          containLable: true
        },
        tooltip: {},
        xAxis:
          data: ["Viewed my profile", "Communicated with", "Received resume", "Number of people exposed"],
          axisLine: {
            lineStyle:
              type: 'solid',
              color: '#eeeeee', //color of the left line of x fontSize: 13,
              width: '0.5' //width of the coordinate line}
          },
          axisLabel: { //x-axis font textStyle: {
              color: '#333333',
              fontSize: 13
            }
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: this.maxStr,
          interval: this.yInterval,
          axisLine: {
            lineStyle:
              type: 'solid',
              color: '#fff', //color of the left line width: '0.5' //width of the coordinate line}
          },
          axisLabel: {
            textStyle: {
              color: '#333333',
              fontSize: 13
            }
          },
          splitLine: {
            show: true,
            lineStyle:
              color: ['#eeeeee'],
              width: 1,
              type: 'solid'
            }
          }

        },
        legend: {
          itemWidth: 11,
          itemHeight: 12,
          symbolKeepAspect: true,
          textStyle: {
            fontSize: 11,
            lineHeight: 0,
            backgroundColor: "rgba(11, 164, 19, 1)"
          },
          // icon: `image://${averageIcon}`,

          data: [
            {
              name: 'My',
              // icon: `image://${myIcon}`//custom small icon},
            {
              name: 'Industry Average',
              // icon: `image://${averageIcon}`
            }
          ],
          align: 'left',
          right: 40,
          top: '0',
          textStyle: {
            fontSize: 12,
            textAlign: 'center',
            color: '#333333',
            magrinRight: 3
          },
        },
        series: [{
          name: 'My',
          type: 'bar',
          data: myData,
          barWidth: 16, //column width barGap: '50%', //spacing label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#4695F3'
            },
            formatter: function (params) {
              return params.value
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#A5CCF6'
              }, {
                offset: 1,
                color: '#4695F3'
              }]),
              barBorderRadius: [4, 4, 0, 0],
            }
          }
        },
        {
          name: 'Industry Average',
          type: 'bar',
          data: averageData,
          barWidth: 16,
          barGap: '50%',
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#FE8401'
            },
            formatter: function (params) {
              return params.value
            }
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFB235'
              }, {
                offset: 1,
                color: '#FE8401'
              }]),
              barBorderRadius: [4, 4, 0, 0],
            },
            emphasis:
              barBorderRadius: 30
            },
          }
        }
        ]
      }, true);
    },

    hideData() {
      this.$emit("hideDialog")
    },

    confirm () {
      this.hideData();
    },

  }
}
</script>
 
<style scoped>
.echarts_con {
  width: 100%;
  margin: 0 auto;
  margin-top: 8px;
  border-radius: 20px;
  background: #fff;
  padding-bottom: 35px;
}
.echarts_main {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
  margin-bottom: -32px;
  margin-right: 20px;
  margin-left: 20px;
}
.bottom {
  width: 90%;
  margin: 0 auto;
  background: #fef8e1;
  border-radius: 6px;
  height: 100%;
  margin-top: 16px;
}
.bottom_con {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
}
.bottom_text {
  height: 34px;
  line-height: 34px;
  font-size: 13px;
  font-family: PingFang, PingFang-SC;
  font-weight: SC;
  text-align: left;
  color: #fa5d1d;
}
.right_close {
  width: 13px;
  height: 13px;
}
</style>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: