?附上 heightcharts 官網(wǎng)地址?Highcharts 演示 | Highchartshttps://www.hcharts.cn/demo/highcharts

首先需要下載一下 heightcharts執(zhí)行命令

npm install highcharts --save

?然后初始化：

<template>
  <div id="container" style="width: 600px; height: 400px"></div>
</template>

<script>
import { reactive, toRefs, ref, onMounted } from 'vue'
import Highcharts from 'highcharts' //必須引入
import Highcharts3D from 'highcharts/highcharts-3d' // 3D必須有引入
Highcharts3D(Highcharts)
export default {
  setup() {
    let pie = ref('')
    let state = reactive({})

    onMounted(() => {
      let colors = ['rgba(36, 154, 163, 0.6)', 'rgba(0, 255, 0,0.6)', 'rgba(255, 0, 255,0.6)']
      Highcharts.setOptions({
        colors: colors
      })
      Highcharts.chart(
        'container',
        {
          credits: {
            enabled: false, // 默認(rèn)值，如果想去掉版權(quán)信息，設(shè)置為false即可
            text: 'www.hcharts.cn', // 顯示的文字
            href: 'http://www.hcharts.cn', // 鏈接地址
            position: {
              // 位置設(shè)置
              align: 'left',
              x: 400,
              verticalAlign: 'bottom',
              y: -100
            },
            style: {
              // 樣式設(shè)置
              cursor: 'pointer',
              color: 'red',
              fontSize: '30px'
            }
          },
          chart: {
            spacing: [40, 0, 40, 0],
            options3d: {
              enabled: true,
              alpha: 45
            }
          },
          title: {
            floating: true,
            text: '這里標(biāo)題'
          },
          tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: 'pointer',
              dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || '#fff'
                }
              },
              point: {
                // events: {
                //   mouseOver: function (e) {
                //     // 鼠標(biāo)滑過時(shí)動(dòng)態(tài)更新標(biāo)題
                //     chart.setTitle({
                //       text: e.target.name + '\t' + e.target.y + ' %'
                //     })
                //   }
                // }
              },
              innerSize: 220,
              depth: 40
            }
          },
          series: [
            {
              type: 'pie',
              innerSize: '80%',
              name: '市場(chǎng)份額',
              data: [
                ['IE', 26],
                ['Safari', 18],
                ['Opera', 16],
                ['其他', 10]
              ]
            }
          ]
        },
        function (c) {
          // 圖表初始化完畢后的會(huì)掉函數(shù)
          // 環(huán)形圖圓心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize)
          // 動(dòng)態(tài)設(shè)置標(biāo)題位置
          c.setTitle({
            y: centerY + titleHeight / 2
          })
        }
      )
    })
    return {
      ...toRefs(state),
      pie
    }
  }
}
</script>

<style lang="scss" scoped>
.pie {
  width: 100%;
  height: 100%;
}
</style>

如此你就得到了一個(gè)3D餅圖?文章來源地址http://www.zghlxwxcb.cn/news/detail-539614.html

到了這里，關(guān)于vue3+heightchart實(shí)現(xiàn)3D餅圖，echarts3D餅圖，3D餅圖引導(dǎo)線實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！