【echarts】24、highchart+vue2

前言

基于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>

【echarts】24、highchart+vue2 - 3D饼图相关推荐

echarts 3d饼图
echarts 3d饼图效果图: 第一步: 在main.js引入echarts import * as echarts from 'echarts' Vue.prototype.$echarts = ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
分享个轮播的3D饼图，分别用Echarts和HighCharts实现
轮播的3D饼图,效果如下 Echarts效果图有这方面需求的朋友肯定有在Echarts社区上找过相关3D饼图的方案. 大同小异,所有3D饼图的实现方式,基本上使用了surface曲面的原理,我也是在 ...
eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应.否则不出效果!!目前已知可以生效有: 第一种1: npm install echarts@5.1.2 --save npm insta ...
基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
基于echarts 24种数据可视化展示,填充数据就可用,动手能力强的还可以DIY(演示地址+下载地址) 前言演示地址下载地址 Demo示例(部分) 1.总览 2.物流信息展示 3.车辆综合管控平 ...
3d饼图 vue_3D 饼图在 VUE 中的实现
最近有多位读者反应,3D 饼图在 VUE 环境里跑不通.可我其实是一个先学 ECharts 后学 Javascript 的前端外行,再加上读者往往也没有告诉我具体的报错信息是什么,所以一时也没能帮读者 ...
在线作图丨如何绘制精美的3D饼图
Question 1:什么是饼图? 饼图(pie chart)是常用的基本统计图形之一,可以直观地展示整体与个体之间的比较情况.在生信分析中,饼图常用于展示各元素数值相对于总数的占比情况,图中每个扇 ...
R语言使用pie函数可视化饼图（pie chart）、为饼图添加百分比信息、使用plotrix包可视化3D饼图、使用plotrix包可视化扇形饼图
R语言使用pie函数可视化饼图(pie chart).为饼图添加百分比信息.使用plotrix包可视化3D饼图.使用plotrix包可视化扇形饼图目录
3d饼图 vue_在Vue中如何使用highCharts绘制3d饼图
本篇文章主要介绍了在Vue中使用highCharts绘制3d饼图的方法,现在分享给大家,也给大家做个参考. highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用h ...

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

前言

实现效果

代码实现

【echarts】24、highchart+vue2 - 3D饼图相关推荐

最新文章

热门文章