highcharts 3D环形饼图

小白@菜

已于 2023-10-31 14:47:48 修改

阅读量401

点赞数

文章标签： 3d

于 2023-10-31 14:43:09 首次发布

本文链接：https://blog.csdn.net/gfei1234/article/details/134139383

版权

本文档详细介绍了如何使用Highcharts库来创建具有三维效果的环形饼图，包括从下载安装到在HTML、CSS和JS文件中配置代码的全过程。在数据部分定义并应用特定的方法来实现3D视觉效果。

摘要由CSDN通过智能技术生成

效果图
底座图片
1.下载安装highcharts

npm install highcharts --save

2.在页面引入

import highcharts from 'highcharts'

3.在main.js引入

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)

4.html部分代码

		<div class="echartsBox">
          <div class="chart-container">
            <div class="textColor">{
  {  this.arrValue[0] }}</div>
            <div id="echartsid1"
                 class="chartsid"></div>
            <!-- 底座背景 -->
            <div class="bg"></div>
          </div>
          <div class="chart-container">
            <div class="textColor textColor2">{
  {  this.arrValue[1] }}</div>
            <div id="echartsid2"
                 class="chartsid"></div>
            <!-- 底座背景 -->
            <div class="bg"></div>
          </div>
          <div class="chart-container">
            <div class="textColor textColor3">{
  {  this.arrValue[2] }}</div>
            <div id="echartsid3"
                 class="chartsid"></div>
            <!-- 底座背景 -->
            <div class="bg"></div>
          </div>
          <div class="chart-container">
            <div class="textColor textColor4">{
  {  this.arrValue[3] }}</div>
            <div id="echartsid4"
                 class="chartsid"></div>
            <!-- 底座背景 -->
            <div class="bg"></div>
          </div>
        </div>

5.css部分代码

.echartsBox {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.chart-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  .textColor {
    font-size: 16px;
    font-weight: bold;
    color: #0659e6;
  }
  .textColor2 {
    color: #5c98bc;
  }
  .textColor3 {
    color: #4fc05c;
  }
  .textColor4 {
    color: #44aba9;
  }
  .chartsid {
    height: 80px;
    width: 100px;
    margin-bottom: -20px;
  }
  .bg {
    position: absolute;
    bottom: -25px;
    // left: 50%;
    z-index: 0;
	width: 100%;
    height: 100%;
    background: no-repeat center;
    background-image: url('~@/assets/screenImage/chartbg.png');
    background-size: auto;
  }
}

6.js部分代码

在data中定义

	  dataList: [],
      dataList1: [],
      dataList2: [],
      dataList3: [],

js方法


	initOption(a) { // 后端数据
      let a1 = parseFloat(a[0])
      this.dataList = [   // 数据格式
        {
          name: '大型企业',
          y: a1,     // 数据值
          h: 10,     // 饼图高度
          bfb: 0,
        },
        {
          name: 'all',
          y: 100,
          h: 5,
          bfb: 0,
        },
      ]
      let a2 = parseFloat(a[1])
      this.dataList1 = [
        {
          name: '中型企业',
          y: a2,
          h: 10,
          bfb: 0,
        },
        {
          name: 'all',
          y: 100,
          h: 5,
          bfb: 0,
        },
      ]
      let a3 = parseFloat(a[2])
      this.dataList2 = [
        {
          name: '小型企业',
          y: a3,
          h: 10,
          bfb: 0,
        },
        {
          name: 'all',
          y: 100,
          h: 5,
          bfb: 0,
        },
      ]
      let a4 = parseFloat(a[3])
      this.dataList3 = [
        {
          name: '微型企业',
          y: a4,
          h: 10,
          bfb: 0,
        },
        {
          name: 'all',
          y: 100,
          h: 5,
          bfb: 0,
        },
      ]
      // 修改3d饼图绘制过程

      var each = hi