快速运用Highcharts实现一个饼状图
1.npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了
npm install highcharts --save
2.引入HighCharts
import HighCharts from 'highcharts/highcharts'
3.页面
getInit() {
var chart = {
type: 'pie',
// spacing : [20, 0 , 20, 0],
backgroundColor: 'rgba(0,0,0,0)',
options3d: {
enabled: true,
alpha: 45,
beta: 0
}
};
var title = {
text: ''
};
var tooltip = {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var colors = ['#0091FF', '#10DDE9', '#F3D200', '#EC3DAF',]; //设置饼图颜色
var credits = {
enabled: false //禁用版权url 此处不设置, 会显示highecharts.com
};
var legend = {
align: 'center',
verticalAlign: 'top',
x: 0,
y: 0,
itemStyle: {
color: "#99D9E8",
fontSize:14
}
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 25, //饼图厚度
// color:pieColors,
dataLabels: {
distance: 10,//设置引导线的长度
color: '#fff',//全局设置字体颜色
enabled: true,
format: '{y}%',
},
showInLegend: true //显示legend
}
};
var series = [{
type: 'pie',
name: 'Browser share',
startAngle: 180,//调整饼图的角度 方向:顺时针
data: [
['gjf-1', 35],
['gjf-2', 23],
{
name: 'gjf-3',
y: 40,
sliced: true,
selected: true
},
['gjf-4', 12],
]
}];
var json = {};
json.title = title;
json.chart = chart;
json.tooltip = tooltip;
json.legend = legend;
json.colors = colors; // 设置饼图颜色
json.credits = credits;
json.plotOptions = plotOptions;
json.series = series;
HighCharts.chart('pieTest', json)
},
就这样一个3D饼图就出现啦!!
交流
1、QQ群:可添加qq群共同进阶学习: 进军全栈工程师疑难解 群号: 856402057
2、公众号:公众号「进军全栈攻城狮」
对前端技术保持学习爱好者欢迎关注公众号共同学习。在进阶的路上,共勉