昨天接到的任务就是使用echarts来绘制
（http://www.buguzixun.com/trend/list.htm）这样的曲线图。因为是第一次接触这个新知识，于是，我和小伙伴一起研究了一天，终于才有了这样的效果，或许可以帮助到初次接触echarts的你。
源代码附上：
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<script src="static/js/echarts.js"></script>
</header>
<body>
<div id="main" style="width: 80%;height:500px;"></div>
</body>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var data=[{
name: '西安',
type: 'line',
data: [[1458403200000,1], [1458489600000,3], [1458576000000,9], [1458662400000,27], [1458748800000,1200]]
},{
name: '长沙',
type: 'line',
data: [[1458403200000,3], [1458489600000,7], [1458576000000,44], [1458662400000,66], [1458748800000,120]]
},{
name: '云南',
type: 'line',
data: [[1458576000000,22], [1458835200000,102], [1459094400000,55], [1459180800000,180]]
}
]
function legendData(){
var legendData=[];
for(var i=0;i<data.length;i++){
legendData.push(data[i].name)
}
return legendData;
}
option = {
title: {
text: '螺纹钢 走势图',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.seriesName+'<br/>' + echarts.format.formatTime('yyyy-MM-dd',params.data[0]) + ' : ' + params.data[1];
}
},
legend: {
bottom:'50%',
left: 'right',
orient:'vertical',
data:legendData()
},
xAxis: {
splitLine: {// 网格线
show: false
},
type: 'time',
axisLabel:{ formatter: function(date){return echarts.format.formatTime('yyyy-MM-dd',date)}}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
name:'价格(元/吨)',
nameLocation:'middle',
nameGap:40,
axisLine: { // 轴线
show: false
},
axisTick: { // 刻度线
show: false
},
type: 'value',
},
series: data
};
myChart.setOption(option)
</script>
</html>
![echarts 3d饼图_使用ECharts框架实现图形化报表展示ECharts的入门ECharts的基本使用小结[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)