在vue项目开发中如何利用百度echarts做一个饼图数据分析图,下面web建站小编给大家简单介绍一下具体实现代码,如右图!
1、在需要的页面引入
复制代码import * as echarts from 'echarts'
//如果没有安装,根据提示安装echarts
- 1
- 2
- 3
2、实现代码如下:
复制代码drawPie() {
var myindex = 0
var colorArr = [
{
c1: '#3266f6',
c2: '#661dcf'
},
{
c1: '#ec489e',
c2: '#fdae40'
},
{
c1: '#4b96e0',
c2: '#4fdac5'
},
{
c1: '#4fabda',
c2: '#1395d8'
}
]
let myPieChart = echarts.init(document.getElementById('pies'))
myPieChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}个 ({d}%)'
},
legend: {
top: '10%',
itemGap: 10 //图例之间间距
},
series: {
name: '近三十天访问统计',
type: 'pie',
silent: true,
radius: ['0', '75%'],
center: ['50%', '55%'],
avoidLabelOverlap: false,
minAngle: 15, //最小角度
zlevel: 1,
itemStyle: {
normal: {
color: function(params) {
let colorList = colorArr
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
offset: 0,
color: colorList[params.dataIndex].c1
},
{
offset: 1,
color: colorList[params.dataIndex].c2
}
])
}
}
},
label: {
normal: {
show: true,
position: 'inner',
formatter: '{b}:{d}%\n{c}',
lineHeight: 15,
color: '#fff'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ name: '学习', value: 300 },
{ name: '资料', value: 500 },
{ name: '下载', value: 200 }
]
}
})
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
百度echarts雷达图radar根据分数点显示每个不同颜色
百度echarts柱状图/折线图x轴显示全部文本(太长自动换行)
上面是“vue+百度echarts做一个饼图”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。
当前网址:https://m.ipkd.cn/webs_3692.html
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!