Echarts在线免费图表

 
            var xdata = ['6.63083333333333', '9.56269675925926', '8.81244212962963', '9.02211805555556', '7.69822916666667', '11.7292476851852', '12.1640509259259', '12.6342708333333', '13.0557523148148', '13.1058449074074', '13.1058449074074', '13.9878356481481', '14.0115162037037', '10.4925115740741', '10.6805902777778', '17.5057986111111', '16.5144560185185', '16.6917939814815', '18.8424305555556', '19.0278240740741', '19.591400462963', '19.7627893518519', '20.7760648148148', '21.1738194444444', '23.7297453703704', '24.6482638888889', '25.5517361111111', '26.6355671296296', '27.1861689814815', '27.7202314814815', '28.022650462963', '28.7652893518519', '29.8066550925926', '30.6732638888889', '31.7436689814815', '32.6900810185185', '33.6315046296296', '35.6947569444444', '35.7170138888889', '36.0818402777778', '36.6397800925926', '36.9515740740741'];
var dataArr = [95.8035338151379, 95.8035338151379, 95.8035338151379, 95.1847750009944, 95.4971783535063, 95.477746284512, 95.477746284512, 95.2362271118132, 95.4066660659976, 95.4066660659976, 95.4066660659976, 95.4066660659976, 95.4066660659976, 95.4066660659976, 95.4066660659976, 95.5437502616029, 95.0132559447207, 95.0132559447207, 95.9217469007381, 95.9217469007381, 95.9217469007381, 95.9217469007381, 95.9217469007381, 95.0927996244567, 95.0930216737218, 95.5456774516215, 95.2143951044507, 95.70836400808, 95.7022352102299, 95.7022352102299, 95.4289862947575, 95.4040426605813, 95.6375618339111, 95.0380412174135, 95.1386083988169, 95.1386083988169, 95.1386083988169, 95.1386083988169, 95.1386083988169, 95.2820821501711, 95.2820821501711, 94.1345969737039];
var alarmLineData = [85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85, 85]
var fittingData = [95.6301275477034,95.6253622963783,95.6205972825058,95.615832506074,95.6110679670711,95.6063036654853,95.6015396013048,95.5967757745176,95.5920121851121,95.5872488330763,95.5824857183985,95.5777228410667,95.5729602010693,95.5681977983943,95.5634356330299,95.5586737049644,95.5539120141858,95.5491505606824,95.5443893444423,95.5396283654537,95.5348676237048,95.5301071191837,95.5253468518787,95.520586821778,95.5158270288696,95.5110674731418,95.5063081545828,95.5015490731807,95.4967902289238,95.4920316218001,95.487273251798,95.4825151189055,95.4777572231109,95.4729995644024,95.4682421427681,95.4634849581962,95.4587280106749,95.4539713001925,95.449214826737,95.4444585902967,95.4397025908597];
option = {
    backgroundColor: 'rgba(0,0,0,.8)',
    textStyle: {
        color: '#545454',
        fontFamily: 'Source Han Sans',
        fontWeight: 'lighter'

    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        top: '20%',
        bottom: '10%'
    },
    legend: {
        show: true,
        x: 'center',
        y: '35',
        itemGap: 20,
        itemWidth: 24,
        itemHeight: 15,
        textStyle: {
            color: '#fff',
            fontSize: 20
        },
        data: ['a', 'b']
    },
    xAxis: {
        name: '数目(个)',
        nameTextStyle: {
            fontSize: 20,
            color: '#fff'
        },
        type: 'category',
        data: xdata,
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 20
            }

        },
        nameLocation: 'middle', // --位置居中
        nameGap: 40, // --与y轴距离
    },
    yAxis: {
        name: '（%）',
        // axisLabel: {
        //     formatter: '{value}'
        // },
        nameTextStyle: {
            fontSize: 20,
            color: '#fff'
        },
        axisLine: {
            show: false
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            textStyle: {
                color: '#fff',
                fontSize: 20
            }

        },
        position: 'left', //--位置靠右
        nameLocation: 'middle', // --位置居中
        nameGap: 60, // --与y轴距离
        nameRotate: 90 // --角度
    },
    // dataZoom: [{ // 这个dataZoom组件，默认控制x轴。
    //         type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
    //         start: 0, // 左边在 10% 的位置。
    //         end: 100 // 右边在 60% 的位置。
    //     },
    //     { // 这个dataZoom组件，也控制x轴。
    //         type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
    //         start: 0, // 左边在 10% 的位置。
    //         end: 100 // 右边在 60% 的位置。
    //     }
    // ],
    series: [{
            symbolSize: 15,
            name: 'a',
            data: dataArr,
            color: '#00F18E',
            type: 'scatter'
        },
        {
            name: '安全报警线',
            tooltip:{
                show:false
            },
            type: 'line',
            smooth: false,
            symbolSize: 0,
            symbol: 'none',
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgba(190,9,18,1)'
                }
            },
            data: alarmLineData
        },
         {
		        name: 'b',
		        type: 'line',
		        smooth: false,
		        symbolSize: 0,
		        symbol: 'none',
		        lineStyle: {
		            normal: {
		                width: 2
		            }
		        },
		        itemStyle: {
		            normal: {
		                color: 'rgba(0,0,0,1)'
		            }
		        },
		        data:fittingData
		    }
    ]
}