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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值