Echarts在线免费图表

 
            
const data = [1700, 800, 1700, 600, 800, 1700];
var barWidth = 30;
option = {
    backgroundColor: "#1146cc",
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            var str = params[0].name + ":";
            params.filter(function (item) {
                if (item.componentSubType == "bar") {
                    str += "<br/>" + item.seriesName + "：" + item.value;
                }
            });
            return str;
        },
    },
    //图表大小位置限制
    grid: {
        x: '10%',
        x2: '5%',
        y: '15%',
        y2: '15%',
    },
    xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        //坐标轴
        axisLine: {
            show: true,
            lineStyle: {
                width: 1,
                color: '#214776'
            },
            textStyle: {
                color: '#fff',
                fontSize: '10'
            }
        },
        type: 'category',
        axisLabel: {
            textStyle: {
                color: '#C5DFFB',
                fontWeight: 500,
                fontSize: '14'
            }
        },
        axisTick: {
            textStyle: {
                color: '#fff',
                fontSize: '16'
            },
            show: false,
        },
        axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
                type: 'dashed',//线的类型 虚线
                color: '#DEDEDE',
            },
        },
    },
    yAxis: {
        name: '厂屋租凭统计：',
        nameTextStyle: {
            color: '#DEDEDE',
            fontSize: 12,
            padding: 10,
        },
        min: 0,//最小
        max: 3500,//最大
        interval: 500,//相差
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',//线的类型 虚线0
                opacity: 0.2//透明度
            },
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false,
        },
        //坐标值标注
        axisLabel: {
            show: true,
            textStyle: {
                color: '#C5DFFB',
            }
        },
    },
    series: [
        //中
        {
            z: 1,
            name: '绿色',
            type: "bar",
            barWidth: barWidth,
            barGap: "0%",
            data: data,
            itemStyle: {
                normal: {
                    color: {
                        type: "linear",
                        x: 0,
                        x2: 1,
                        y: 0,
                        y2: 0,
                        colorStops: [
                            { offset: 0, color: 'rgba(50, 255, 238, .85)' },
                            { offset: 0.5, color: 'rgba(50, 255, 238, .85)' },
                            { offset: 0.5, color: 'rgba(0, 216, 198, .9)' },
                            { offset: 1, color: 'rgba(0, 216, 198, .9)' }
                        ],
                    },
                    //柱形图上方标题
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: 'rgb(1, 255, 250)',
                            fontSize: 8
                        }
                    },
                }
            },
        },
        //下
        {
            z: 2,
            name: '绿色',
            type: "pictorialBar",
            data: data.map(item => item + 90),
            symbol: "diamond",
            symbolOffset: ["0%", "0%"],
            symbolSize: [barWidth, 10],
            itemStyle: {
                normal: {
                    color: 'transparent'
                },
            },
            tooltip: {
                show: false,
            },
        },
        //上
        {
            z: 3,
            name: '绿色',
            type: "pictorialBar",
            symbolPosition: "end",
            data: data,
            symbol: "diamond",
            symbolOffset: ["0%", "-58%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#04cee0'
                },
            },
            tooltip: {
                show: false,
            },
        },
    ],
}