让文字竖排显示ECharts Gallery

20:11:45图表已生成
代码
var dataAxis = ['宜昌海关', '武江物流', '二二二二', '四四四四', '东湖海关', '三三三三', '鄂加工区', '十十十十', '十堰海关', '六六六六', '武关机场', '一一一一', '黄石海关', '七七七七', '五五五五', '武关货管', '武业务处', '八八八八', '九九九九', '襄阳海关', '武汉海关', '荆州海关'];
var data = [1644.28, 969.25, 929.13, 920.65, 890.25, 831.75, 816.9, 736.65, 722.56, 717.37, 647.99, 439.25, 379.81, 321.48, 257.16, 217.27, 150.65, 140.03, 56.27, 28.61, 26.44, 17.91];
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
    dataShadow.push(data[i]);
}

option = {
    title: {
        text: '特性示例：渐变色 阴影 点击缩放',
        subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
    },
    backgroundColor: '#eee',
    toolbox: {
        feature: {
            dataView: {}
        }
    },
    tooltip: {},
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            },
            formatter: function(val) {
                return val.split("").join("\n");
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [{
        type: 'inside'
    }],
    series: [{ // For shadow
        type: 'bar',
        itemStyle: {
            normal: {
                color: 'rgba(0,0,0,0.05)'
            }
        },
        barGap: '-100%',
        barCategoryGap: '40%',
        data: dataShadow,
        animation: false
    }, {
        type: 'bar',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                        offset: 0,
                        color: '#83bff6'
                    }, {
                        offset: 0.5,
                        color: '#188df0'
                    }, {
                        offset: 1,
                        color: '#188df0'
                    }]
                )
            },
            emphasis: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1, [{
                        offset: 0,
                        color: '#2378f7'
                    }, {
                        offset: 0.7,
                        color: '#2378f7'
                    }, {
                        offset: 1,
                        color: '#83bff6'
                    }]
                )
            }
        },
        data: data
    }]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function(params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
