Echarts在线免费图表

 
            var option = {
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'category',
        name: '0', //X轴的名称
        nameLocation: 'start', //X轴名称显示的位置，默认: end
        nameTextStyle: { //设置名称颜色
            color: '#AEAEAE',
            fontWeight: 'bolder',
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

        axisLine: { //设置X轴的样式
            show: true,
            lineStyle: {
                color: '#F2F2F2',
                type: 'solid',
                width: 3
            }
        },
        axisTick: {
            show: false //是否显示X轴刻度
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    yAxis: {
        show: false,
    },
    series: [{
        name: '柱狀图',
        type: 'bar',
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: '#666',
                    fontWeight: 'bolder',
                },
                position: 'top'

            }
        },

        barWidth: '30%', // 设置柱子的宽度，默认自适应
        //barMinHeight: 1, //设置柱子的最小高度
        // 设置柱子的样色
        itemStyle: {
            normal: {
                color: function(params) {
                    return params.value > 0 ? '#3ec182' : '#ffa142';
                }

            }
        },
        data: [50000, 70005, 0, {value:-10000,label:{normal:{position:'bottom'}}}, 10000, 20050, 15000, 10000, 95, 10060, 50, 4500]
    }, {
        name: '折线',
        type: 'line',
        itemStyle: { /*设置折线颜色*/
            normal: {
                color: '#c4cddc'
            }
        },
        data: [5000, 7005, 10000, -8000, 10000, 2000, 15000, 10000, 95000, 11000, 50000, 45]
    }]
};