Echarts在线免费图表

 
            option = {
    title: {
        text: '近十天PM2.5值变化',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'axis',
        formatter:function(params)
        {
    　　　　　var relVal = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' +params[i].marker+ params[i].seriesName+'：'+params[i].value +'ug/m³';
            }
            return relVal;
        }
    },
    // 右上角的工具
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
    xAxis: {
      name:'\t\t\t\t\t\t\t时间',
      type: 'category',
      boundaryGap: false,
      symbol: ['none', 'arrow'],
      axisLine: {
        show:true,
        symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'],
        symbolOffset: 10,
        symbolSize: [35, 38]
      },
      data: ['13号', '14号', '15号', '16号', '17号', '18号', '19号','20号','21号','22号']
    },
    yAxis: {
      name:'\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tug/m³',
      type:'value',
      axisLine: {
        show:true,
        symbol: ['none', 'path://M5, 20 L5, 5 L8, 8 L5, 2 L2, 8 L5, 5 L5.3, 6 L5.3,20'],
        symbolOffset: 10,
        symbolSize: [35, 38]
      },
      axisTick: {show:true},
      axisLabel: {
          formatter: '{value}',
          symbol: ['none','arrow'],
      }
    },
    visualMap: {
      show: false,
      pieces:[
        {
          lte: 75, 
          color: "#00ff00"
        },
        {
          gt: 75,
          lte: 90,
          color: "orange"
        },
        {
          gt: 90,
          color: "#ff0000"
        }
      ]
    },
    series: [
        {
            name: 'PM2.5',
            type: 'line',
             smooth: true,
            data: [60, 75,85,75,40,75,90,98,90, 75],
            markLine: {
                itemStyle: {
                    // 基线公共样式
                    normal: { 
                        lineStyle: {
                            // 'solid'实线；'dashed'虚线；'dotted'点线
                            type: 'dashed',
                        }, 
                        label: { 
                            show: true,
                            position: 'end',
                            formatter: '{b}{c}',
                        }
                    },
                },
                data: [
                    {
                        name: '红色预警',
                        type: 'average',
                        yAxis: 90,
                        lineStyle: {
                            color: '#ff0000'
                        }
                    },
                    {
                        name: '黄色预警',
                        type: 'average',
                        yAxis: 75,
                        lineStyle: {
                            color: 'orange'
                        }
                    }
                ]
            },
        }
    ],
};