本文主要是介绍Echarts 折线统计图 ---记录下方便以后使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图：
1，首先要引入echarts.js 下载链接: http://echarts.baidu.com/download.html
//页面上准备一个盒子，作为存放统计图的容器
<div id="echarts_30" style="height: 500px; width:100%; margin-top: 0px;" class="m-b-sm"></div>//把js放在下面就可以了
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("echarts_30"));var option = {// 标题title: {text: '党员先锋数据分析'},tooltip: {trigger: 'axis'},//图例名legend: {data:['先锋策略一','先锋策略二','先锋策略三','先锋策略四','先锋策略五']},grid: {left: '3%', //图表距边框的距离right: '4%',bottom: '3%',containLabel: true},//工具框，可以选择toolbox: {feature: {saveAsImage: {}}},//x轴信息样式xAxis: {type: 'category',boundaryGap: false,data: ['19-01','19-02','19-03','19-04','19-05','19-05','19-06','19-07','19-08','19-09','19-10','19-11','19-12'],//坐标轴颜色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是不支持虚线的，实线就用trueitemStyle:{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',symbolSize:4,color:['orange'],smooth:false, //关键点，为true是不支持虚线的，实线就用trueitemStyle:{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>
这篇关于Echarts 折线统计图 ---记录下方便以后使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
