vue使用echarts饼图和柱状图

<div class="echart" ref="myChart">div>
<div class="pie" ref="pie">div>

vue最后不要直接操作dom,所以我这里选择使用ref

drawLine() {
      const myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption({
        title: { text: '项目数据' },
        xAxis: {
          data: ['筹备阶段', '在建阶段', '停工阶段', '完工阶段', '竣工阶段'],
        },
        yAxis: {
          type: 'value'
        },
        color: '#2196f3',
        series: [
          {
            type: 'bar',
            data: [23, 24, 18, 25, 27],
            showBackground: true,
            barWidth: '50%'
          }
        ],
        tooltip: {  //鼠标悬浮时,设置样式
          trigger: 'axis',
          backgroundColor: 'rgba(32, 33, 36,.7)',
          borderColor: 'rgba(32, 33, 36,0.20)',
          borderWidth: 1,
          textStyle: {
            color: '#fff',
            fontSize: '12'
          },
          axisPointer: { 
            type: 'shadow',
            label: {
              backgroundColor: '#6a7985'
            }
          },
        }
      })
    },
    initPie() {
      const pie = this.$echarts.init(this.$refs.pie)
      pie.setOption({
        title: {
          text: '人员数据',
          left: 'center'
        },
        color: ['#00BCD4', '#ff5722', '#FF9800'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '企业人员数据',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              { value: 1048, name: '累计用工数', },
              { value: 735, name: '当前用工数', },
              { value: 580, name: '管理人员数', },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
mounted() {
    this.$refs.basicRef.drawLine()
    this.$refs.basicRef.initPie()
  }

注意: 修改颜色的时候,最后不要使用透明,很容易鼠标悬浮后,就bar消失闪烁
要带透明度就用rgba

你可能感兴趣的:(echarts,vue.js,javascript)