3d highcharts 3D echarts 在Vue中使用highCharts绘制3d饼图的方法

已于 2022-07-15 16:29:30 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： echarts
于 2022-07-14 17:09:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50885665/article/details/125788186
版权

vue.js javascript

亲测:  官方文档:图表缩放 | Highcharts 使用教程

一、引入

1、安装依赖于highcharts

npm install highcharts --save

2、安装完成后，进入项目main.js进行配置：

import highcharts from 'highcharts'

因为我们需要使用3d图表，main.js还需要引入：

import highcharts3d from 'highcharts/highcharts-3d'

在main.js 中,调用3d图表：

highcharts3d(highcharts)

 二、页面画图

import HighCharts from "highcharts";

方法一:

 

3D 饼图 | Highcharts

配置参考:https://www.jb51.net/article/134744.htm

 方法一完整代码:

<template>
  <div>
    <YearTabBox
      :yearsList="yearsList"
      :selectYear="selectYear"
      @getSelectTime="getSelectTime"
    />

    <div class="card">
      <div :id="id" :option="option"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import HighCharts from "highcharts";
import RightTopPieLine from "../RightTopPieLine";
import YearTabBox from "@/components/YearTabBox";
import {
  getActionData,
  getYearActionData,
  getYearListBySql,
} from "@/api/manage";
import { GlobalMixin } from "@/mixins/globalMixin";

export default {
  name: "RightTopPie",
  mixins: [GlobalMixin],
  components: {
    RightTopPieLine,
    YearTabBox,
  },
  // props: {
  //   msg: String,
  // },

  data() {
    return {
      selectYear: "",
      yearsList: [],
      chartData: [],
      arrData: [],
      intDom: "",
      state: true,

      id: "test",
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        title: {
          text: "测试用", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },

        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 35, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "测试用1", //统一的前置词,非必须
            data: [
              ["测试1", 12], //模块名和所占比，也可以{name: '测试1',y: 12}
              ["测试2", 23],
              ["测试3", 19],
              ["测试4", 29],
            ],
          },
        ],
      },


    };
  },
  mounted() {
    // this.getAllYears();
    HighCharts.chart(this.id, this.option)
  },
  methods: {
    async getAllYears() {
      const yearsParams = {
        api_key: "qJwsmXalFui8LnPxye",
        metadata_id: "1529387467046707201",
      };
      const paramSql =
        "select count_year from dp_ads.ads_jm_trade_homepage GROUP BY count_year";

      const res = await getYearListBySql(
        "/ylgDataApply/advancedQueryData",
        yearsParams,
        paramSql
      );

      let years = [];
      years = res.items;
      let arr = [];
      years.map((item, index) => {
        // yearsList.push(Number(item.count_year));
        arr.push(item.count_year);
      });
      // 对年份进行排序
      arr.sort((a, b) => {
        return b - a;
      });
      this.yearsList = arr;
      this.selectYear = arr[0];
      // console.log(this.yearsList, "this.yearsList");
      this.getData();
    },

    async getData() {
      const params = {
        api_key: "qJwsmXalFui8LnPxye",
        metadata_id: "1529387467046707201",
      };
      const res = await getYearActionData(
        "/ylgDataApply/advancedQueryData",
        params,
        this.selectYear
      );
      let arr = res.items;
      // console.log(res.items, "00对外贸易关系");
      arr.forEach((item) => {
        item.exit = Number(Number(item.exit).toFixed(1));
        item.import = Number(Number(item.import).toFixed(1));
        item.total = Number(Number(item.total).toFixed(1));
      });
      this.chartData = arr;

      this.arrData = this.getDescend(arr, "total");
      // console.log(res.items, "对外贸易关系");
      // this.handleChangeGraph();
    },

    getSelectTime(val) {
      this.selectYear = val;
      this.getData();
      // this.handleData();
    },
  },
};
</script>

<style scoped lang="scss">
.card {
  margin-top: 10px;
  width: 100%;
  position: relative;
}

.rightTopPie {
  width: 96%;
  height: 32vh;
  // border: 1px solid red;
  margin: 0px 10px 0px auto;
  border-top: 0;
}

#line2 {
  width: 52%;
  height: calc(32vh - 2.5vh);
  // border: 1px solid blue;
  position: absolute;
  right: 0;
  top: 2.5vh;
  padding-left: 2%;
}

#line2 > div {
  width: 80%;

  // border: 1px solid blue;
}

.rightLine {
  width: 100%;
  // border: 1px solid red;
  > span:first-child {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #8fbfff;
    box-shadow: 0px 0px 12px #8fbfff;
    margin-right: 10px;
  }
  > span:nth-child(2) {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-style: italic;
    color: #eceff4;
    margin-right: 20px;
  }
  > span:nth-child(3) {
    font-size: 16px;
    font-family: PangMenZhengDao;
    font-weight: bold;
    font-style: italic;
    color: #eceff4;
  }
  > span:nth-child(4) {
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #eceff4;
    padding-left: calc(100% - 20px - 60px - 60px - 55px);
    // text-align: right;
  }
}

/deep/ .el-progress-bar {
  padding-right: 0px;
}

/deep/ .el-progress-bar__inner {
  background-image: linear-gradient(
    to right,
    #0b3fff 0%,
    #587bfd 50%,
    #6c8bfd 100%
  );
  border-radius: 0px;
}

::v-deep .el-progress {
  .el-progress-bar__outer {
    background-color: #181f35; //这里是背景颜色
    border-radius: 0px;
  }
}

::v-deep .el-progress__text {
  display: none;
}
</style>

<template>
  <div>
    <YearTabBox
      :yearsList="yearsList"
      :selectYear="selectYear"
      @getSelectTime="getSelectTime"
    />

    <div class="card ">
      <!-- <div ref="rightTopPie" class="rightTopPie" /> -->

      <div :id="id" :option="option"></div>

      <!-- <div id="line2">
        <RightTopPieLine
          v-for="(item, index) of arrData.slice(0, 4)"
          :key="index"
          :NoNum="index"
          :title="item.nation"
          :percentage="Number(item.proportion)"
        />
      </div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import HighCharts from "highcharts";
import RightTopPieLine from "../RightTopPieLine";
import YearTabBox from "@/components/YearTabBox";
import {
  getActionData,
  getYearActionData,
  getYearListBySql,
} from "@/api/manage";
import { GlobalMixin } from "@/mixins/globalMixin";
export default {
  name: "RightTopPie",
  mixins: [GlobalMixin],
  components: {
    RightTopPieLine,
    YearTabBox,
  },
  // props: {
  //   msg: String,
  // },

  data() {
    return {
      selectYear: "",
      yearsList: [],
      chartData: [],
      arrData: [],
      intDom: "",
      state: true,
      id: "rightTopPie",
      option: "",
    };
  },
  mounted() {
    this.getAllYears();
    this.getData();
  },
  methods: {
    async getAllYears() {
      const yearsParams = {
        api_key: "qJwsmXalFui8LnPxye",
        metadata_id: "1529387467046707201",
      };
      const paramSql =
        "select count_year from dp_ads.ads_jm_trade_homepage GROUP BY count_year";

      const res = await getYearListBySql(
        "/ylgDataApply/advancedQueryData",
        yearsParams,
        paramSql
      );

      let years = [];
      years = res.items;
      let arr = [];
      years.map((item, index) => {
        // yearsList.push(Number(item.count_year));
        arr.push(item.count_year);
      });
      // 对年份进行排序
      arr.sort((a, b) => {
        return b - a;
      });
      this.yearsList = arr;
      this.selectYear = arr[0];
      // console.log(this.yearsList, "this.yearsList");
      this.getData();
    },

    async getData() {
      const params = {
        api_key: "qJwsmXalFui8LnPxye",
        metadata_id: "1529387467046707201",
      };
      const res = await getYearActionData(
        "/ylgDataApply/advancedQueryData",
        params,
        this.selectYear
      );
      let arr = res.items;
      // console.log(res.items, "00对外贸易关系");
      arr.forEach((item) => {
        item.exit = Number(Number(item.exit).toFixed(1));
        item.import = Number(Number(item.import).toFixed(1));
        item.total = Number(Number(item.total).toFixed(1));
      });
      this.chartData = arr;

      this.arrData = this.getDescend(arr, "total");
      // console.log(res.items, "对外贸易关系");
      // this.handleChangeGraph();

      this.option = {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
          spacing: [0, 100, 0, 0], //图标与四周的间距 相当于echarts grid
        },

        // title: {
        //   text: "测试用", //图表的标题文字
        // },
        // subtitle: {
        //   text: "", //副标题文字
        // },

        legend: {
          align: "left", //水平方向位置
          verticalAlign: "top", //垂直方向位置
          x: 0, //距离x轴的距离
          y: 0, //距离Y轴的距离
        },

        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 35, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "测试用1", //统一的前置词,非必须
            data: [
              ["测试1", 12], //模块名和所占比，也可以{name: '测试1',y: 12}
              ["测试2", 23],
              ["测试3", 19],
              ["测试4", 29],
            ],
            showInLegend: true,

            // verticalAlign:top
          },
        ],
      };

      HighCharts.chart(this.id, this.option);
    },

    getSelectTime(val) {
      this.selectYear = val;
      this.getData();
      // this.handleData();
    },
  },
};
</script>

<style scoped lang="scss">
.card {
  margin-top: 10px;
  width: 100%;
  position: relative;
}

.rightTopPie {
  width: 96%;
  height: 32vh;
  border: 1px solid red;
  margin: 0px 10px 0px auto;
  border-top: 0;
}

#line2 {
  width: 52%;
  height: calc(32vh - 2.5vh);
  // border: 1px solid blue;
  position: absolute;
  right: 0;
  top: 2.5vh;
  padding-left: 2%;
}

#line2 > div {
  width: 80%;

  // border: 1px solid blue;
}

.rightLine {
  width: 100%;
  // border: 1px solid red;
  > span:first-child {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #8fbfff;
    box-shadow: 0px 0px 12px #8fbfff;
    margin-right: 10px;
  }
  > span:nth-child(2) {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-style: italic;
    color: #eceff4;
    margin-right: 20px;
  }
  > span:nth-child(3) {
    font-size: 16px;
    font-family: PangMenZhengDao;
    font-weight: bold;
    font-style: italic;
    color: #eceff4;
  }
  > span:nth-child(4) {
    font-size: 16px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #eceff4;
    padding-left: calc(100% - 20px - 60px - 60px - 55px);
    // text-align: right;
  }
}

/deep/ .el-progress-bar {
  padding-right: 0px;
}

/deep/ .el-progress-bar__inner {
  background-image: linear-gradient(
    to right,
    #0b3fff 0%,
    #587bfd 50%,
    #6c8bfd 100%
  );
  border-radius: 0px;
}

::v-deep .el-progress {
  .el-progress-bar__outer {
    background-color: #181f35; //这里是背景颜色
    border-radius: 0px;
  }
}

::v-deep .el-progress__text {
  display: none;
}
</style>

星空小梦
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
highcharts实现3D饼图
weixin_44389116的博客
07-07 1064
【代码】highcharts实现3D饼图。
在Vue中使用highCharts绘制3d饼图的方法
08-28
在Vue中使用HighCharts绘制3D饼图是一种常见的数据可视化方式。HighCharts是一款基于JavaScript的图表库，具有强大的数据可视化功能。下面是使用HighCharts绘制3D饼图在Vue中的实现方法： 首先，需要安装HighCharts...
vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现
super帅的博客
12-30 3221
vue3+heightchart实现3D饼图，echarts3D饼图，3D饼图引导线实现
vue实现3D饼图（echart三维饼图）
weixin_39921970的博客
10-06 1万+
效果如图： 1、图表依赖：echartjs、echart-gl npm install echarts npm install echarts-gl 2、DOM <!--3D饼图 GO--> <div class="m-warning"> <div class="warning-pie" id="pieChart"></div> </div> 3、JS引入，与处理 ①引入 import echarts from 'ech
vue3+echarts实现3D饼图
最新发布
weixin_55341181的博客
06-06 412
如果需要镂空 只需要传入internalDiameterRatio 0.6即可。创建echart.js。
Vue + HighCharts 画不同高度的3D饼/环图
Jonsnow595的博客
01-16 3173
前言：由于公司可视化数字大屏项目需要用到了3D饼图和3D环图，所以在博客里记录一下！如果能帮到你，那么点个赞吧，哈哈哈。 话不多说，直接先上效果图： 3D饼图 3D环图 下面是步骤以及代码： 1.npm 安装 highcharts npm install highcharts --save 2.在main.js中引用 highcharts, 注意：画3D图需要使用到 highcharts里面的 highcharts-3d import Highcharts from 'highcharts' i
highcharts（3d饼图）
weixin_41897680的博客
12-21 2895
前言 最近要把饼图改成3d的，原来的echart图做不了，这里推荐一下highcharts 链接：传送门 使用 文档 配置项文档 安装 npm install --save highcharts 使用 在main.js里注册 // 引入charts import highcharts from 'highcharts'; // 使用3d图还需要引入下面的 import highcharts3d from 'highcharts/highcharts-3d'; // 调用3d图表 highcharts3d(
在vue项目中引入highcharts图表的方法(详解)
08-27
最后，我们可以在 Vue 组件中使用 Chart 组件来 render 图表。 ```html <x-chart :id="id" :option="option"></x-chart> import XChart from './chart.vue' import options from './chart-options/options...
highcharts图表插件（中文包和本地下载）
09-01
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，包括折线图、柱状图、饼图、散点图等，为数据可视化提供了强大的支持。本压缩包资源主要包含以下几个核心...
各种统计饼图vue-图表大全
11-04
在Vue项目中使用Highcharts，你需要安装`highcharts-vue`插件： ```bash npm install highcharts-vue --save ``` 然后，你可以在Vue组件中使用`highcharts`属性来设置图表配置： ```javascript <highcharts :...
highcharts vue 3D环形图用法
m0_74094484的博客
08-23 430
highcharts vue 3D环形图用法。
vue中使用highcharts记录属性3D立体饼图
weixin_72915006的博客
10-12 418
在main.js里面引入。
Highcharts 3D饼图（2）自定义颜色以及仿echarts饼图颜色标注
kkk_xxx的博客
10-30 3586
文章目录自定义颜色仿echarts饼图颜色标注 自定义颜色 效果 官网： https://www.highcharts.com.cn/demo/highcharts#3d. 找到官方文档的通用配置 :如下图 colors: [ '#714fe3', '#6497f4', '#5f75e5', '#67acfe', .
vue+Highcharts绘制3D饼图
m0_71349739的博客
08-08 1061
vue+highcharts实现3D饼图
echarts3d饼图
前端学习分享
09-14 4224
echarts 3d饼图
vue使用highcharts3D饼图
weixin_55553106的博客
12-16 589
1.安装highcharts npm install vue-highcharts --save npm install highcharts --save 2.main.js import highcharts from 'highcharts' import highcharts3d from 'highcharts/highcharts-3d' highcharts3d(highcharts) 3.使用highcharts的页面 <div class="net-chart" :id="id"
3d饼图 vue_在 Vue 中使用 highCharts 绘制 3d 饼图的方法
weixin_36301296的博客
01-11 317
在 Vue 中使用 highCharts 绘制 3d 饼图的方法highcharts 是国外知名基于 javascript 的图表库由于中文官网的 vue 中使用 highcharts 配置繁琐并且需要引入 jquery 作为依赖, 所以弃用接下来, 给各位伙伴简要的讲叙下 highcharts 在 vue 中的使用和配置方法首先使用 npm 在你的项目中安装 vue-highchartsnpm ...
【图表】highcharts 3D立体饼图渐变带背景 vue
heye0815的博客
07-15 2428
highcharts 3D立体饼图渐变透明带背景
HighCharts 饼图背景色透明
热门推荐
z69183787的专栏
02-05 1万+
默认的highcharts 背景都是白色，这次项目中需要在highcharts图的后面显示背景图片，所以必须让chart背景透明： function showPie(name){ var a = [ {name:'A',y:100,href:'http://www.baidu.com',color:'#D587CE'},
vue使用highcharts 3d饼图
09-14
你可以按照以下步骤在Vue中使用Highcharts来绘制3D饼图: 1. 在你的项目的main.js文件中引入Highcharts和highcharts-3d插件: ```javascript import Highcharts from 'highcharts' import Highcharts3d from 'highcharts/highcharts-3d' Highcharts3d(Highcharts) ``` 2. 在你的组件中创建一个容器来显示图表，并引入Highcharts库: ```vue <template> <div class="container"> <div :id="id" :option="option" class="chart-container"></div> </div> </template> <script> import Highcharts from 'highcharts' export default { props: { id: { type: String }, // 用于区分多个图表的唯一标识符 option: { type: Object } // 图表的配置选项 }, data() { return { chart: null } }, mounted() { // 在组件加载完成后初始化图表 this.setOption() }, methods: { setOption() { // 销毁之前的图表实例 if (this.chart) { this.chart.destroy() } // 创建一个新的图表实例并渲染到指定容器中 this.chart = Highcharts.chart(this.id, this.option) // 重新调整图表大小，以适应容器 this.chart.reflow() } } } </script> <style scoped> .container { width: 100%; height: 100%; background: #043b8c; .chart-container { width: 100%; height: 100%; } /* 去除水印 */ .highcharts-credits { display: none; } } </style> ``` 3. 在你的父组件中，使用刚才创建的组件，并传入相应的id和配置选项: ```vue <template> <div> <pie-chart id="chart1" :option="chartOptions"></pie-chart> </div> </template> <script> import PieChart from './PieChart.vue' export default { components: { PieChart }, data() { return { chartOptions: { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: '3D饼图' }, series: [{ name: 'Brands', data: [ ['Chrome', 61.41], ['Internet Explorer', 11.84], ['Firefox', 10.85], ['Edge', 4.67], ['Safari', 4.18], ['Other', 7.05] ] }] } } } } </script> ``` 这样，你就可以在Vue中使用Highcharts来绘制3D饼图了。记得根据你的需求修改配置选项和数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值