echarts简介
一个基于 JavaScript 的开源可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。
较复杂图表实现
富文本饼图
代码部分：
var myChart = echarts.init(document.getElementById('R6'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'R6. 入境外国游客事由构成比重',
textStyle: {
color: '#a1a3a6'
}
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{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项目中向后端获取数据，纯前端代码时替换为正常数据就好。
浙江省地图与散点图以及热图结合
代码部分：
<section class="map-zhejiang">
<div id="map-data"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("map-data");
var myChart = echarts.init(dom);
var app = {};
var option;
myChart.showLoading();
$.get('https://geo.datav.aliyun.com/areas_v3/bound/330000_full.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('浙江', geoJson);
myChart.setOption(
(option = {
title: {
text: '浙江省5A景区分布',
subtext: 'Data from aliYun',
textStyle: {
color: '#a1a3a6'
}
},
tooltip: {
trigger: 'item',
},
toolbox: {
show: true,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {},
}
},
visualMap: {
min: 1,
max: 3,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['#d6ecf0', '#ff8c31', '#9ed048'],
symbol: 'triangle'
}
},
geo: {
type: 'map',
map: '浙江'
},
series: [
{
name: '浙江各市5A景区数量',
type: 'map',
map: '浙江',
label: {
show: true
},
data: [
{name: '杭州市', value: 3},
{name: '绍兴市', value: 1},
{name: '台州市', value: 2},
{name: '舟山市', value: 1},
{name: '宁波市', value: 2},
{name: '嘉兴市', value: 3},
{name: '衢州市', value: 2},
{name: '丽水市', value: 1},
{name: '湖州市', value: 2},
{name: '金华市', value: 1},
{name: '温州市', value: 2},
],
},
{
symbolSize: 15,
data: [
{name: '杭州西湖', value: [120.149138, 30.238258]},
{name: '千岛湖', value: [119.060105, 29.552987]},
{name: '乌镇', value: [120.495615, 30.754426]},
{name: '西塘古镇旅游景区', value: [120.897876, 30.94479]},
{name: '南浔古镇', value: [120.436729, 30.879215]},
{name: '鲁迅故里风景区', value: [120.593489, 29.998334]},
{name: '西溪国家湿地公园', value: [120.071528, 30.27289]},
{name: '嘉兴南湖景区', value: [120.771869, 30.753924]},
{name: '天一阁·月湖景区', value: [121.54465, 29.877347]},
{name: '普陀山', value: [122.397608, 30.007976]},
{name: '雁荡山', value: [121.040296, 28.379665]},
{name: '江郎山·廿八都旅游区 ', value: [118.568599, 28.54759]},
{name: '刘伯温故里旅游景区', value: [120.017937, 27.85048]},
{name: '仙都国家级风景名胜区 ', value: [120.129466, 28.70123]},
{name: '神仙居景区', value: [120.599543, 28.683553]},
{name: '天台山景区 ', value: [121.042193, 29.163259]},
{name: '溪口风景区 ', value: [121.264469, 29.691391]},
{name: '湖州太湖旅游度假区 ', value: [120.110798, 30.964577]},
{name: '根宫佛国文化旅游区 ', value: [118.399521, 29.139382]},
{name: '横店影视城 ', value: [120.338256, 29.146458]},
],
type: 'scatter',
coordinateSystem: 'geo',
itemStyle: {
color: 'black',
borderColor: '#a1a3a6',
borderWidth: 2
}
}
]
})
);
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</section>其中关于地图的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);词云
代码：
<script src="{% static 'js/echarts-wordcloud.js' %}"></script>
<script type="text/javascript">
var chartDom1 = document.getElementById('R7');
var myChart1 = echarts.init(chartDom1);
var option = {
title: {
text: 'R7. 顾客最在意的民宿特点（1000元以上）',
textStyle: {
color: '#a1a3a6'
}
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 700,
height: 450,
drawOutOfBound: true,
textStyle: {
color: function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
{
name: '老板不错',
value: 17,
textStyle: {
color: '#90d7ec'
},
emphasis: {
textStyle: {
color: 'red'
}
}
},
{
name: '服务不错',
value: 15
},
{
name: '感觉很温馨',
value: 2
},
{
name: '房间干净',
value: 4
},
{
name: '位置不错',
value: 9
},
{
name: '风格不错',
value: 2
},
{
name: '环境好',
value: 6
},
{
name: '下次还来',
value: 3
},
{
name: '早餐不错',
value: 1
},
{
name: '设施好',
value: 6
},
{
name: '适合拍照',
value: 2
},
{
name: '有停车位',
value: 4
},
{
name: '有落地窗',
value: 3
},
{
name: '床舒适',
value: 5
}
]
}]
};
option && myChart1.setOption(option);
</script>需要注意的是词云由于echarts官方不支持，需要额外引入echarts-wordcloud.js包，由于本次我的引入方式为了适配Django项目，采用了本地引入。如有需要wordcloud包，可以从github上获取到。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
