百度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:450px;"></div>
    <script type="text/javascript">
        var option = {
          backgroundColor: '#030c2b',
          tooltip: {
            show: true,
            trigger: 'axis',
            transitionDuration: 0,  // 让toolltip紧跟鼠标
            axisPointer: {
        	  type: 'cross', 
        	  label: {
        	    backgroundColor: '#6a7985'
        	  }
            }
          },
          legend: {
            show: false,
            textStyle: {
            color: '#fff',
            fontSize: 13
            }
          },
          grid: {
            left: '2%',
            right: '5%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: [
            {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisTick: {
              show:false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
              color: '#0f5681'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
              color: '#0f5681',
              type: 'dotted'
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 12    //更改坐标轴文字大小
              }
            }
            },
          ],
          yAxis: {
            type: 'value',
            name: this.yUnit,
            nameTextStyle: {
            color:'#fff',
            fontSize:12,
            align:'right'
            },
            axisLine: {
            lineStyle: {
              color: '#0f5681'
            }
            },
            axisTick: {
            show:false,
            alignWithLabel: true
            },
            splitLine: {
            lineStyle: {
              color: '#0f5681',
              type: 'dashed' // solid dashed dotted
            },
            },
            axisLabel: {
            show: true,
            align:'right',
            textStyle: {
              color: '#fff',  //更改坐标轴文字颜色
              fontSize: 12     //更改坐标轴文字大小
            }
            },
          },
          series: [
            {
            name: this.name,
            type: 'line',
            symbol: 'circle',
            symbolSize: '7',
            itemStyle: {
              // 线和拐点的颜色
              borderColor: '#01ecf2',
              color: '#0e0b12', //图例的颜色
            },
            emphasis: {
              itemStyle: { // 移入拐点样式配置
              color: '#0e0b12', //图例的颜色
              borderColor: '#b08010', //图形的描边颜色
              }
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#004b85" },
              { offset: 0.7, color: "#031233" },
              { offset: 1, color: "#031233" },
              ])
            },
            lineStyle: {
              color:'#01ecf2'
            },
            data: [18, 17, 175, 18, 11, 13, 95]
            }
          ]
        };
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option);
    </script>
</body>
</html>

源代码：点击运行 》

运行结果：

源代码：