Echarts在线免费图表

 
            //趋势分析//价格区间
option = {
    tooltip: {
        trigger: 'axis',
        backgroundColor:'rgba(255,255,255,0.8)',
        extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
        textStyle:{
            color:'#6a717b',
        },
    },
    toolbox:{
        right:20,
        feature:{
            magicType: {
                type:['bar']
            },
            restore: {},
            saveAsImage: {},
            // brush: {},
        }
    },
    grid: {
        top: '90',
        left: '3%',
        right: '4%',
        bottom: '50',
        containLabel: true
    },
    color: ['#229aff','#fdb94e','#30d6a9','#F87B5F','#89c9e1','#ffad8c','#07bcbe'],
    legend: {
        top: '30',
        data: ['0-100','100-300','300-600','600-900','900-1200','1200以上']
    },
dataZoom: [{
        type: 'inside',
        start: 0,
        end: 100
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
   xAxis: [
		{
		type: 'category',
		data: ['2017.01','2017.02','2017.03','2017.04','2017.05','2017.06','2017.07','2017.08','2017.09','2017.10','2017.11','2017.12','2018.01','2018.02'],
		boundaryGap: false,//坐标轴两边留白
        splitLine: {
            show: false,
            lineStyle: {
                color: ['#D4DFF5']
            }
        },
        axisTick: {
            show: true
        },
        axisLine: {
            lineStyle: {
                color: '#666'
            }
        },
    },
	],
    yAxis: [{
            name: '零售量（万件）',
			type: 'value',
			axisLabel: {
				textStyle: {
					color: '#666',
				    fontStyle: 'normal',
				}
			},
			axisLine:{
				show: false
			},
			axisTick:{
				show: false
			},
			splitLine: {
				show: true,
			}
    }],
    series: [{
        name: '0-100',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1020, 1149, 1270, 1332, 1556, 1767, 1856, 1922, 2106, 2130, 2264, 2303, 1149, 1270,],
    }, {
        name: '100-300',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1020, 1149, 1270, 1332, 1556, 1767, 1856, 1922, 2106, 2130, 2264, 2303,1149, 1270],
    }, {
        name: '300-600',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1856, 1922, 2106, 2130, 2264, 2303, 1020, 1149, 1270, 1332, 1556, 1767, 1556, 1767],
    }, {
        name: '600-900',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1556, 1767, 1856, 1922, 2106, 2130, 2264, 2303, 1020, 1149, 1270, 1332,2101,900 ],
    }, {
        name: '900-1200',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1556, 1767, 1856, 1922, 2106, 2130, 2264, 1020, 1149, 1270, 1332, 2303, 2130, 2264],
    }, {
        name: '1200以上',
        type: 'line',
        //stack: '总量',
        symbolSize: 7,
        data: [1020, 1149, 1270, 1332, 2130, 2264, 2303, 1556, 1767, 1856, 1922, 2106,1149, 1270 ],
    },]
};