Echarts在线免费图表

 
            option = {
    //你的代码
    backgroundColor: '#081736',
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    // legend: {
    //     show: true,
    //     data: legend4,
    //     align: 'left',
    //     center: 0,
    //     textStyle: {
    //         color: "#fff"
    //     },
    //     itemWidth: 20,
    //     itemHeight: 10,
    // },
    grid: {
        top: "25%",
        left: '8%',
        right: '8%',
        bottom: '20%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLine: {
            show: true,
            lineStyle: {
                color: "#192d7e",
                width: 1,
                type: "solid"
            }
        },
        axisTick: {
            show: false,
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#fff",
            }
        },
    }],
    yAxis: [{
        name: "转入面积",
        type: 'value',
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: "#fff",
            }
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#0a3e98",
                width: 1,
                type: "solid"
            }
        },
        splitLine: {
            lineStyle: {
                color: "#063374",
                type: "dotted"
            }
        },
        nameTextStyle: {
            color: "#fff",
            fontSize: 11,
        }
    }],
    // dataZoom:{
    // 	start:0,
    // 	end:120
    // },
    series: [{
        name: "转入面积",
        type: 'bar',
        data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66, 80, 45],
        smooth: true,
        barWidth: 10, //柱子宽度
        barGap: 0.5, //柱子之间间距
        animationDuration: function (idx) {
            return idx * 500 + 1000;
        },
        areaStyle: { //区域填充样式
            normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(230,104,78, 0.9)'
                },
                {
                    offset: 0.9,
                    color: 'rgba(230,104,78, 0)'
                }
                ], false),

                shadowColor: 'rgba(230,104,78, 0.9)', //阴影颜色
                shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
        },
        itemStyle: {
            normal: {
                barBorderRadius: 16,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#fa714e'
                }, {
                    offset: 1,
                    color: '#e43346'
                }]),
                opacity: 1,
            }
        }
    },
    ]
}