百度Echarts折线图系列-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="/js/jquery-1.9.0.min.js"></script>
    
    <script src="/js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:380px;"></div>
    <script type="text/javascript">
        option = {
          color: ["#156fff"],
          legend: {
            y: '20',
            data:['日平均点击量','最高点击量'],
        	textStyle: {
        	  color: '#a8abbb',
        	  fontSize: 12
            }
          },
          grid:{
            left:'10%',
            top:90,
            right:'10%',
            bottom:'15%',
          },
          xAxis:  {
            type: 'category',
            axisLabel: {//横坐标的控制
        	  show:true,//是否显示横坐标数据
        	  rotate: 30,//坐标的倾斜角度
        	  inside:false,//刻度是否朝内
        	  margin:8,//标尺与轴线的距离，默认8
        	  textStyle: {
                color: '#a8abbb',
                fontSize: 12
              }
            },
        	splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#6c7087'
              }
            },
            boundaryGap: false,
            data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08']
          },
          yAxis: {  //设置纵坐标
            type: 'value',
            axisLabel: {
        	  formatter: '{value}',
        	  rotate: 30,//坐标的倾斜角度
        	  inside:true,//刻度是否朝内
        	  textStyle: {
                color: '#a8abbb',
                fontSize: 12
              }
            },
        	 axisTick:  {
              show: false
            },
            axisLine:  {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#6c7087'
              }
            }
          },
          series: [
            {
        	  name:'日平均点击量',
        	  type:'line',
        	  data:[400, 554, 1580, 1355, 1111, 1644, 1066],
        	  markLine: {
        		data: [
        		{type: 'average', name: '平均值'}
        		]
        	  }
            },
            {
        	  name:'最高点击量',
        	  type:'line',
        	  data:[800, 1000, 1700, 1689, 1500, 1900, 2016],
        	  markPoint: {
        		data: [
        			{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
        		]
        	  },
        	  markLine: {
        		data: [
        		  {type: 'average', name: '平均值'},
        		  [{
        		    symbol: 'none',
        		    x: '90%',
        		    yAxis: 'max'
        		  }, {
        		    symbol: 'circle',
        		  }]
        		]
        	  },
        　　　itemStyle: {
        　　　  normal: {
        　　　    color: '#00FF00',//改变折线点的颜色
        　　　    lineStyle: { //改变折线颜色
        　　　    　color: '#00FF00'
        　　　    }
        　　　  }
        　　　},
            }
          ]
        };
		var myChart = echarts.init(document.getElementById('main'));
		myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：