echarts ——折线图_echarts 折线图axispointer-CSDN博客

效果图：
<!DOCTYPE html>
<html>
<head>
<title>折线图</title>
<link rel="stylesheet" type="text/css" href="../base/base.css">
<script type="text/javascript" src="../base/echarts.js"></script>
<script type="text/javascript" src="../base/jquery-1.4.2.min.js"></script>
</head>
<body>
<br>
<div id="chartCon" class="item"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chartCon'));

var option1 = {
      tooltip: {
          trigger: 'axis',//出发类型。坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          backgroundColor: '#F9C200',//提示框的背景颜色
          textStyle: {//提示框浮层的文本样式。
            color: '#140D41',//提示框的字体颜色
            fontSize: 12,//提示框的字体大小
          },
          axisPointer: {/*出现tooltip悬浮窗时候与坐标轴的指示器，--坐标轴指示器配置项*/
            type: "cross",/*cross十字准星指示器_'line' 直线指示器_'shadow' 阴影指示器_'none' 无指示器*/
            //axis: "y",
            lineStyle: {
                type: "dashed",
                width: 1,
                color: "#F9C200"
            }
        },
        formatter: function(params){
           var res = params[0].name + '<br/>', val;
          for(var i = 0, length = params.length; i < length; i++) {
                val = params[i].value + '%';
                res += params[i].marker + params[i].seriesName + '：' + val + '<br/>';
            }
            return res;
        },
      },
      legend: {//展现了不同系列的标记(symbol)，颜色和名字。放在头部或者侧部的标示
          left: 10,
          itemWidth:12,
          itemHeight:6,
          itemStyle:{
            fontSize:17,
          },
          data:[{
             name: '当日值',
              // 强制设置图形为矩形。
              icon: 'rect',
              // 设置文本样式
              textStyle: {
                  color: '#1A8BFF',
                  fontSize:15,
              }
          },{
             name: '预警值',
              // 强制设置图形为矩形。
              icon: 'rect',
              // 设置文本样式
              textStyle: {
                  color: '#0EE3EF',
                  fontSize:15,
              }
          },{
             name: '17年同期值',
              // 强制设置图形为矩形。
              icon: 'rect',
              // 设置文本样式
              textStyle: {
                  color: '#02E98E',
                  fontSize:15,
              }
          }],
          selected:{
            '17年同期值':false
          }
      },
      grid: {//坐标系内绘图模块距离容器各个方向的距离
          left: '1%',
          right: '3%',
          bottom: '4%',
          containLabel: true//grid 区域是否包含坐标轴的刻度标签
      },
      //工具栏。置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
      toolbox: {
        show: false,//隐藏下载按钮
        feature: {
            saveAsImage: {}
        },
      },
      xAxis: {//直角坐标系 grid 中的 x 轴
          type: 'category',
          // name: "%",
          boundaryGap: false,
          data: [1,2.00,3,4,5,6,7],
          axisLine: {//坐标轴轴线相关设置。
            lineStyle: {
              color:"rgba(0,124,252,.5)",
            },
          },
          axisLabel: {//坐标轴刻度标签的相关设置
            color: '#54B3EA',
            fontWeight: 700
          }
      },
      yAxis: {
        splitLine:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。
        type: 'value',
          axisLine: {//坐标轴轴线相关设置。
            lineStyle: {
              color:"rgba(0,124,252,.5)",
            },
          },
          axisLabel: {//坐标轴刻度标签的相关设置。
            color: '#54B3EA',
            fontWeight: 700
          },
          min: 'dataMin',//坐标轴刻度最小值。
          max: 'dataMax',//坐标轴刻度最大值。特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
      },
      //系列列表。每个系列通过 type 决定自己的图表类型
      series: [{
        name: '当日值',//系列名称，用于tooltip的显示，legend 的图例筛选
        type: 'line',
        // symbol: 'diamond',//折线点设置样式(标记的图形)
        symbol: 'image://../images/top4H@2x.png',
        symbolSize: [20,20],
        //symbol:'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',//飞机
        itemStyle: {
          normal: {// normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式
            color: "#1A8BFF",//折点的颜色
            lineStyle: {
              color: '#1A8BFF',//折线的颜色
              width: 3,//折线的宽度
            },
            opacity: 0.6,
            label: {
              show: true,
            }
          },
          emphasis: {
              color: "#FFD200",
              borderWidth: 6,
              borderColor: "rgba(255,210,0,.2)",
              opacity: 1,
          },
        },
        lineStyle: {
          color: 'rgba(128, 128, 128, 0.5)',
          width: 5,
        },
        smooth: true,//是否平滑曲线显示  false是折线
        data: [172,122,{value:313.00,label:{normal: {show:true,position:"top"}}},33,54,126,34]
    },
    {
        name: '预警值',
        type: 'line',
         symbol: 'diamond',//折线点设置样式
        itemStyle: {
          normal: {// normal 和 emphasis 两个状态。normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式
            color: "#0EE3EF",//折点的颜色
            lineStyle: {
              color: '#0EE3EF',//折线的颜色
              width: 3,//折线的宽度
            }
          }
          
        },
        areaStyle: {//曲线加填充，颜色rgba(14,243,253,.3)，透明度30%
          normal: {
              color: "rgba(14,243,253,.3)"
          }
        },
        smooth: true,
        data: [30, 482, 134, 791,{value:133,label:{normal: {show:true,position:"top"}}}, 390, 30]
        // data: this.arriveDate.warningArr.reverse()
    },
    {
        name: '17年同期值',
        type: 'line',
         symbol: 'diamond',//折线点设置样式
        itemStyle: {
          normal: {
            color: "#02E98E",//折线点的颜色
            borderColor: "#02E98E",
            lineStyle: {
              color: '#02E98E',//折线的颜色
              width: 3,//折线的宽度
            }
          },
        },
        smooth: true,
        data: [522,143,422,145,167,234,{value:433,label:{normal: {show:true,position:"top"}}}]
    }]
  };

myChart.setOption(option1);


</script>
</body>
</html>