【echarts】24、highchart+vue2 - 3D饼图

最新推荐文章于 2024-09-11 08:50:49 发布

汪同学丶

最新推荐文章于 2024-09-11 08:50:49 发布

阅读量915

点赞数 1

分类专栏： ECHARTS相关操作文章标签： echarts+vue

本文链接：https://blog.csdn.net/weixin_44402694/article/details/126016822

版权

ECHARTS相关操作专栏收录该内容

24 篇文章 2 订阅

订阅专栏

前言

基于highchart5.x和vue2实现
记录以便日后查阅

实现效果

在这里插入图片描述

代码实现

注意：安装依赖 yarn add hightcharts@5 -S

<template>
  <div class="chart-wrap">
    <div id="chart20" class="chart" />
  </div>
</template>

<script>
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'
import Highmaps from 'highcharts/modules/map'
HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)
Highmaps(Highcharts)

export default {
  name: 'Index',
  data () {
    return {
      chart: null,
      data: [
        { name: '规上企业', value: 26},
        { name: '规下/小微企业', value: 150 }
      ]
    }
  },
  mounted() {
    this.createChartHandler()
  },
  methods: {
    // 创建图表
    createChartHandler () {
      const options = this.getChartOption(this.data)
      this.chart && this.chart.destroy()
      this.chart = new Highcharts.Chart('chart20', options)
    },
    // 获取图表配置项
    getChartOption (pieData) {
      const data = [
        {
          name: '规上企业',
          y: 13,
          color: '#00D7E9',
          sliced: true,
          selected: true
        },
        {
          name: '规下/小微企业',
          y: 8,
          color: '#1FB5FF'
        }
      ]
      data.forEach(item => {
        const temp = pieData.filter(elm => elm.name === item.name)
        item.y = temp[0].value
      })
      return {
        chart: {
          type: 'pie',
          backgroundColor: 'transparent',
          options3d: {
            enabled: true,
            alpha: 65,
            beta: 0
          }
        },
        title: {
          text: null
        },
        credits: {
          enabled: false
        },
        tooltip: {
          pointFormat: '<b>{point.y}</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 20,
            size: 160,
            distance: 1,
            zIndex: 1
          }
        },
        series: [{
          type: 'pie',
          name: '企业占比',
          data: data,
          dataLabels: {
            style: {
              'color': '#ffffff',
              'fontSize': '14px',
              'fontWeight': 'normal',
              'textOutline': 'none'
            },
            useHTML: true
          }
        }]
      }
    }
  }
}
</script>