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 = highcharts.each,
round = Math.round,
cos = Math.cos,
sin = Math.sin,
deg2rad = Math.deg2rad
highcharts.wrap(
highcharts.seriesTypes.pie.prototype,
'translate',
function (proceed) {
proceed.apply(this, [].slice.call(arguments, 1))
// Do not do this if the chart is not 3D
if (!this.chart.is3d()) {
return
}
var series = this,
chart = series.chart,
options = chart.options,
seriesOptions = series.options,
depth = seriesOptions.depth || 0,
options3d = options.chart.options3d,
alpha = options3d.alpha,
beta = options3d.beta,
z = seriesOptions.stacking
? (seriesOptions.stack || 0) * depth
: series._i * depth
z += depth / 2
if (seriesOptions.grouping !== false) {
z = 0
}
each(series.data, function (point) {
var shapeArgs = point.shapeArgs,
angle
point.shapeType = 'arc3d'
var ran = point.options.h
shapeArgs.z = z
shapeArgs.depth = depth * 0.75 + ran
shapeArgs.alpha = alpha
shapeArgs.beta = beta
shapeArgs.center = series.center
shapeArgs.ran = ran
angle = (shapeArgs.end + shapeArgs.start) / 2
point.slicedTranslation = {
translateX: round(
cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
translateY: round(
sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)
),
}
})
}
)
highcharts.chart('echartsid1', {
tooltip: {
enabled: false, // 隐藏tooltip
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
chart: {
animation: false,
backgroundColor: 'none',
type: 'pie', //饼图
margin: [0, 0, 0, 0],
options3d: {
enabled: true, //使用3d功能
alpha: 70, //延y轴向内的倾斜角度
beta: 0,
},
events: {
load: function () {
var each = highcharts.each,
points = this.series[0].points
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
})
})
},
},
},
legend: {
show: false,
enabled: false, // 关闭图例
align: 'right', //水平方向位置
verticalAlign: 'top', //垂直方向位置
layout: 'vertical',
x: -20,
y: 30,
symbolWidth: 10,
symbolHeight: 10,
symbolRadius: '50%', // 修改成圆
itemMarginBottom: 8,
useHTML: false,
//labelFormat: '{name} {y}',
// labelFormatter: function () {
// return (
// '<div style="width: .3125rem;display: inline-block">' +
// this.name +
// ': </div><div style="color: #00d7da;display: inline-block">' +
// this.y +
// '</div>'
// )
// },
itemStyle: {
color: '#f4f4f6',
fontSize: 12,
},
},
title: {
// enabled: false,
text: '',
},
subtitle: {
text: '',
},
plotOptions: {
pie: {
allowPointSelect: false, // 禁用点击
cursor: 'pointer',
depth: 0,
showInLegend: false,
size: '55%', // 外圈直径大小
innerSize: 30, // 内圈直径大小
center: ['50%', '35%'],
colors: ['#3a59f0', '#0349C1'],
dataLabels: {
useHTML: false,
enabled: false, //是否显示饼图的线形tip
distance: 5,
borderColor: '#007acc',
align: 'center',
// verticalAlign: 'top',
position: 'right',
// format: '{point.bfb}%',
// formatter: (point,b) => {
// console.log(point,'ponit-->>')
// console.log(b,'ponit-->>')
// },
// color: '#ffffff',
// style: {
// textOutline: 'none',
// fontSize: 13,
// },
},
},
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
credits: {
enabled: false, // 禁用版权信息
},
series: [
{
type: 'pie',
name: '数量',
data: this.dataList,
},
],
})
highcharts.chart('echartsid2', {
tooltip: {
enabled: false,
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
chart: {
animation: false,
backgroundColor: 'none',
type: 'pie', //饼图
margin: [0, 0, 0, 0],
options3d: {
enabled: true, //使用3d功能
alpha: 70, //延y轴向内的倾斜角度
beta: 0,
},
events: {
load: function () {
var each = highcharts.each,
points = this.series[0].points
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
})
})
},
},
},
legend: {
show: false,
enabled: false, // 关闭图例
align: 'right', //水平方向位置
verticalAlign: 'top', //垂直方向位置
layout: 'vertical',
x: -20,
y: 30,
symbolWidth: 10,
symbolHeight: 10,
symbolRadius: '50%', // 修改成圆
itemMarginBottom: 8,
useHTML: false,
//labelFormat: '{name} {y}',
// labelFormatter: function () {
// return (
// '<div style="width: .3125rem;display: inline-block">' +
// this.name +
// ': </div><div style="color: #00d7da;display: inline-block">' +
// this.y +
// '</div>'
// )
// },
itemStyle: {
color: '#f4f4f6',
fontSize: 12,
},
},
title: {
// enabled: false,
text: '',
},
subtitle: {
text: '',
},
plotOptions: {
pie: {
allowPointSelect: false, // 禁用点击
cursor: 'pointer',
depth: 0,
showInLegend: false,
size: '55%', // 外圈直径大小
innerSize: 30, // 内圈直径大小
center: ['50%', '35%'],
colors: ['#5495cd', '#0349C1'],
dataLabels: {
useHTML: false,
enabled: false, //是否显示饼图的线形tip
distance: 5,
borderColor: '#007acc',
align: 'center',
// verticalAlign: 'top',
position: 'right',
// format: '{point.bfb}%',
// formatter: (point,b) => {
// console.log(point,'ponit-->>')
// console.log(b,'ponit-->>')
// },
// color: '#ffffff',
// style: {
// textOutline: 'none',
// fontSize: 13,
// },
},
},
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
credits: {
enabled: false, // 禁用版权信息
},
series: [
{
type: 'pie',
name: '数量',
data: this.dataList1,
},
],
})
highcharts.chart('echartsid3', {
tooltip: {
enabled: false,
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
chart: {
animation: false,
backgroundColor: 'none',
type: 'pie', //饼图
margin: [0, 0, 0, 0],
options3d: {
enabled: true, //使用3d功能
alpha: 70, //延y轴向内的倾斜角度
beta: 0,
},
events: {
load: function () {
var each = highcharts.each,
points = this.series[0].points
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
})
})
},
},
},
legend: {
show: false,
enabled: false, // 关闭图例
align: 'right', //水平方向位置
verticalAlign: 'top', //垂直方向位置
layout: 'vertical',
x: -20,
y: 30,
symbolWidth: 10,
symbolHeight: 10,
symbolRadius: '50%', // 修改成圆
itemMarginBottom: 8,
useHTML: false,
//labelFormat: '{name} {y}',
// labelFormatter: function () {
// return (
// '<div style="width: .3125rem;display: inline-block">' +
// this.name +
// ': </div><div style="color: #00d7da;display: inline-block">' +
// this.y +
// '</div>'
// )
// },
itemStyle: {
color: '#f4f4f6',
fontSize: 12,
},
},
title: {
// enabled: false,
text: '',
},
subtitle: {
text: '',
},
plotOptions: {
pie: {
allowPointSelect: false, // 禁用点击
cursor: 'pointer',
depth: 0,
showInLegend: false,
size: '55%', // 外圈直径大小
innerSize: 30, // 内圈直径大小
center: ['50%', '35%'],
colors: ['#4caf5a', '#0349C1'],
dataLabels: {
useHTML: false,
enabled: false, //是否显示饼图的线形tip
distance: 5,
borderColor: '#007acc',
align: 'center',
// verticalAlign: 'top',
position: 'right',
// format: '{point.bfb}%',
// formatter: (point,b) => {
// console.log(point,'ponit-->>')
// console.log(b,'ponit-->>')
// },
// color: '#ffffff',
// style: {
// textOutline: 'none',
// fontSize: 13,
// },
},
},
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
credits: {
enabled: false, // 禁用版权信息
},
series: [
{
type: 'pie',
name: '数量',
data: this.dataList2,
},
],
})
highcharts.chart('echartsid4', {
tooltip: {
enabled: false,
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
chart: {
animation: false,
backgroundColor: 'none',
type: 'pie', //饼图
margin: [0, 0, 0, 0],
options3d: {
enabled: true, //使用3d功能
alpha: 70, //延y轴向内的倾斜角度
beta: 0,
},
events: {
load: function () {
var each = highcharts.each,
points = this.series[0].points
each(points, function (p, i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran,
})
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran,
})
})
},
},
},
legend: {
show: false,
enabled: false, // 关闭图例
align: 'right', //水平方向位置
verticalAlign: 'top', //垂直方向位置
layout: 'vertical',
x: -20,
y: 30,
symbolWidth: 10,
symbolHeight: 10,
symbolRadius: '50%', // 修改成圆
itemMarginBottom: 8,
useHTML: false,
//labelFormat: '{name} {y}',
// labelFormatter: function () {
// return (
// '<div style="width: .3125rem;display: inline-block">' +
// this.name +
// ': </div><div style="color: #00d7da;display: inline-block">' +
// this.y +
// '</div>'
// )
// },
itemStyle: {
color: '#f4f4f6',
fontSize: 12,
},
},
title: {
// enabled: false,
text: '',
},
subtitle: {
text: '',
},
plotOptions: {
pie: {
allowPointSelect: false, // 禁用点击
cursor: 'pointer',
depth: 0,
showInLegend: false,
size: '55%', // 外圈直径大小
innerSize: 30, // 内圈直径大小
center: ['50%', '35%'],
colors: ['#2FAAA7', '#0349C1'],
dataLabels: {
useHTML: false,
enabled: false, //是否显示饼图的线形tip
distance: 5,
borderColor: '#007acc',
align: 'center',
// verticalAlign: 'top',
position: 'right',
// format: '{point.bfb}%',
// formatter: (point,b) => {
// console.log(point,'ponit-->>')
// console.log(b,'ponit-->>')
// },
// color: '#ffffff',
// style: {
// textOutline: 'none',
// fontSize: 13,
// },
},
},
series: {
states: {
inactive: {
opacity: 1,
},
},
},
},
credits: {
enabled: false, // 禁用版权信息
},
series: [
{
type: 'pie',
name: '数量',
data: this.dataList3,
},
],
})
},
