一个基于 Javascript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
较复杂图表实现 富文本饼图
代码部分：
var myChart = echarts.init(document.getElementById('R6'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'R6. 入境外国游客事由构成比重',
textStyle: {
color: '#a1a3a6'
}
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
data: [
'会议/商务', '观光休闲', '探亲访友', '服务员工', '其他'
],
top: '5%',
left: 'center',
textStyle: {
color: '#a1a3a6'
}
},
toolbox: {
feature: {
saveAsImage: {},
dataView: {},
dataZoom: {}
}
},
series: [
{
name: '比重-2018',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 8
},
labelLine: {
show: false
},
data: [
{value: {{data_m.2.0}}, name: '会议/商务'},
{value: {{data_m.2.1}}, name: '观光休闲', selected: true},
{value: {{data_m.2.2}}, name: '探亲访友'},
{value: {{data_m.2.3}}, name: '服务员工'},
{value: {{data_m.2.4}}, name: '其他'},
]
},
{
name: '比重-2019',
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 30
},
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
formatter: '{a|{a}}{abg|}n{hr|}n {b|{b}：}{c} {per|{d}%} ',
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
borderWidth: 1,
borderRadius: 4,
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: [
{value: {{data_m.4.0}}, name: '会议/商务'},
{value: {{data_m.4.1}}, name: '观光休闲'},
{value: {{data_m.4.2}}, name: '探亲访友'},
{value: {{data_m.4.3}}, name: '服务员工'},
{value: {{data_m.4.4}}, name: '其他'},
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
其代码中的{{ data }} 是用于Django项目中向后端获取数据，纯前端代码时替换为正常数据就好。
浙江省地图与散点图以及热图结合
代码部分：
其中关于地图的JSON数据可以通过[阿里云DataV.GeoAtlas]更换成其他区域(http://datav.aliyun.com/portal/school/atlas/area_selector)。
单轴散点图
代码：
var chartDomL2 = document.getElementById('LL2');
var myChartL2 = echarts.init(chartDomL2);
var optionL2;
// prettier-ignore
const hours = [
'2.5', '2.6', '2.7', '2.8', '2.9',
'3.0', '3.1', '3.2', '3.3', '3.4',
'3.5', '3.6', '3.7', '3.8', '3.9',
'4.0', '4.1', '4.2', '4.3', '4.4',
'4.5', '4.6', '4.7', '4.8', '4.9',
'5.0'
];
// prettier-ignore
const days = [
'300元以下', '300-1000元', '1000元以上',
];
// prettier-ignore
const data = [[0, 2, 2], [0, 3, 3], [0, 6, 6], [0, 7, 2], [0, 8, 1], [0, 10, 8], [0, 11, 3], [0, 12, 2], [0, 13, 2], [0, 14, 1],
[1, 7, 4], [1, 8, 9], [1, 9, 7], [1, 10, 6], [1, 11, 2], [1, 12, 1], [1, 13, 1], [1, 14, 4], [1, 18, 1], [1, 20, 4], [1, 22, 1],
[2, 7, 1], [2, 8, 3], [2, 12, 2], [2, 13, 1], [2, 18, 3], [2, 22, 9]];
const title = [];
const singleAxis = [];
const series = [];
days.forEach(function (day, idx) {
title.push({
textbaseline: 'middle',
top: ((idx + 0.5) * 100) / 3 + '%',
text: day,
textStyle: {
color: '#a1a3a6'
}
});
singleAxis.push({
left: 150,
type: 'category',
boundaryGap: false,
data: hours,
top: (idx * 100) / 3 + 12 + '%',
height: 100 / 7 - 10 + '%',
axisLabel: {
interval: 2
}
});
series.push({
singleAxisIndex: idx,
coordinateSystem: 'singleAxis',
type: 'scatter',
data: [],
symbolSize: function (dataItem) {
return dataItem[1] * 4;
}
});
});
data.forEach(function (dataItem) {
series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});
optionL2 = {
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {},
}
},
tooltip: {
position: 'top'
},
title: title,
singleAxis: singleAxis,
series: series
};
optionL2 && myChartL2.setOption(optionL2);
词云
代码：
需要注意的是词云由于echarts官方不支持，需要额外引入echarts-wordcloud.js包，由于本次我的引入方式为了适配Django项目，采用了本地引入。如有需要wordcloud包，可以从github上获取到。
