$(document).ready(function() {
var title = {
text: 'Highcharts图表之多图结合(柱形图,折线图,饼图组合)'
};
var xAxis = {
categories: ['vue', 'html', 'css', 'php', 'node']
};
var labels = {
items: [{
html: '访问量',
style: {
left: '50px',
top: '18px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
};
var series= [{
type: 'column',
name: '北京',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: '上海',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: '杭州',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: '均线',
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}, {
type: 'pie',
name: '总访问量',
data: [{
name: '北京',
y: 13,
color: Highcharts.getOptions().colors[0]
}, {
name: '上海',
y: 23,
color: Highcharts.getOptions().colors[1]
}, {
name: '杭州',
y: 19,
color: Highcharts.getOptions().colors[2]
}],
center: [100, 80],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false
}
}
];
var json = {};
json.title = title;
json.xAxis = xAxis;
json.labels = labels;
json.series = series;
$('#myChart').highcharts(json);
});
点击运行 》