<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ECharts-基本線性圖及其配置要求</title> <!-- ECharts單文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="box" style="height:400px;width: 800px;padding: 20px"></div> </div> <script> // 獲取到這個DOM節點，然后初始化 var myChart = echarts.init(document.getElementById("box")); var option = { // 標題 title: { text: '紅包活動數據', subtext: '數據來源：華秉科技-dancer' }, tooltip: { trigger: 'axis' }, //圖例名 legend: { data:['參加活動人數','分享人數','關注人數','注冊人數','領取紅包人數'] }, grid: { left: '3%', //圖表距邊框的距離 right: '4%', bottom: '3%', containLabel: true }, //工具框，可以選擇 toolbox: { feature: { saveAsImage: {} } }, //x軸信息樣式 xAxis: { type: 'category', boundaryGap: false, data: ['12-01','12-02','12-03','12-04','12-05','12-05','12-06','12-07','12-08','12-09','12-10','12-11','12-12','12-13'], //坐標軸顏色 axisLine:{ lineStyle:{ color:'red' } }, //x軸文字旋轉 axisLabel:{ rotate:30, interval:0 }, }, yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 人' } } ], series: [ //虛線 { name:'參加活動人數', type:'line', symbolSize:4, //拐點圓的大小 color:['red'], //折線條的顏色 data:[1000, 300, 500, 800, 300, 600,500,800, 300, 500, 800, 300, 600,500], smooth:false, //關鍵點，為true是不支持虛線的，實線就用true itemStyle:{ normal:{ lineStyle:{ width:2, type:'dotted' //'dotted'虛線 'solid'實線 } } } }, //實線 { name:'分享人數', type:'line', symbol:'circle', symbolSize:4, itemStyle:{ normal:{ color:'red', borderColor:'red' //拐點邊框顏色 } }, data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310] }, { name:'關注人數', type:'line', // stack: '總量', symbolSize:4, color:['orange'], smooth:false, //關鍵點，為true是不支持虛線的，實線就用true itemStyle:{ normal:{ lineStyle:{ width:2, type:'dotted' //'dotted'虛線 'solid'實線 } } }, data:[500, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410] }, { name:'注冊人數', type:'line', symbolSize:4, color:['blue'], itemStyle:{ normal:{ lineStyle:{ width:2, type:'dotted' //'dotted'虛線 'solid'實線 } } }, data:[300, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410] }, { name:'領取紅包人數', type:'line', color:['green'], symbol:'circle', symbolSize:4, data:[310, 352, 280, 334, 373, 310, 340,300, 350, 280, 350, 340, 370, 310], itemStyle:{ normal:{ color:'green', borderColor:'green' } } } ] }; myChart.setOption(option); </script> </body> </html>
附帶：
附帶1：http://echarts.baidu.com/examples/editor.html?c=pie-legend
附帶2：http://echarts.baidu.com/examples/editor.html?c=radar2