<!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; 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:{ 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:{ 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:{ 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