echarts使用
Posted wszxx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts使用相关的知识，希望对你有一定的参考价值。
看官方文档时看配置项比api更直观
html：
<div id="main"></div>
js:
var myChart = echarts.init(document.getElementById(‘main‘));
option = {
tooltip: {
trigger: ‘axis‘
},
legend: {
data: [‘进口总量(kg)‘, ‘进口总额(美元)‘, ‘出口总量(kg)‘, ‘出口总额(美元)‘]
},
grid: {
left: ‘30‘,
right: ‘60‘,
bottom: ‘60‘,
containLabel: true
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: false
},
saveAsImage: {
show: true,
}
},
right: 30
},
calculable: true,
dataZoom: {
show: true,
realtime: true,
start: 0,
end: 100,
},
xAxis: {
type: ‘category‘,
boundaryGap: false,
data: [‘2017-6‘, ‘2017-7‘, ‘2017-8‘, ‘2017-9‘, ‘2017-10‘, ‘2017-11‘, ‘2017-12‘]
},
yAxis: {
type: ‘value‘
},
series: [{
name: ‘进口总量(kg)‘,
type: ‘line‘,
color: [‘#ff7f50‘],
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: ‘进口总额(美元)‘,
type: ‘line‘,
color: [‘#87cefa‘],
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: ‘出口总量(kg)‘,
type: ‘line‘,
color: [‘#da70d6‘],
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: ‘出口总额(美元)‘,
type: ‘line‘,
color: [‘#32cd32‘],
data: [320, 332, 301, 334, 390, 330, 320]
},
]
};
myChart.setOption(option);
以上是关于echarts使用的主要内容，如果未能解决你的问题，请参考以下文章