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

你可以使用 Vue Echarts 来创建柱状图。以下是一个简单的示例: 首先,确保你已经安装了 Echarts: ```bash npm install echarts --save ``` 然后,在你的 Vue 组件中,你可以引入 Echarts 并创建一个柱状图的实例。例如: ```vue <template> <div> <div ref="barChart" style="width: 400px; height: 400px;"></div> <div ref="pieChart" style="width: 400px; height: 400px;"></div> </div> </template> <script> import echarts from 'echarts' export default { mounted() { this.initBarChart() this.initPieChart() }, methods: { initBarChart() { const barChart = echarts.init(this.$refs.barChart) const options = { // 配置柱状图的数据样式 // ... } barChart.setOption(options) }, initPieChart() { const pieChart = echarts.init(this.$refs.pieChart) const options = { // 配置的数据样式 // ... } pieChart.setOption(options) } } } </script> ``` 通过在 `mounted` 钩子中调用 `initBarChart` `initPieChart` 方法,你可以在组件加载后初始化柱状图的实例。然后,你可以根据 Echarts 的文档,配置相应表的数据样式。 注意,上述代码中的 `this.$refs.barChart` `this.$refs.pieChart` 分别是柱状图的 DOM 引用,可以在模板中使用 `ref` 属性指定。 这只是一个简单的示例,你可以根据具体需求自定义柱状图的配置样式。你可以参考 Echarts 的官方文档来了解更多关于如何使用配置不同类型表的信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值