EChars自定义改造柱状图

1、首先看下我们本次成品的最终模样

2、我们在ECharts官网找到一个类似的实例如下

3、改造实例

(1)修改配置中柱状图的颜色

当前效果：

(2)、修改图表大小，移动到容器左下

当前效果：

（3）修改X轴标签

效果如下：

（4）隐藏X轴轴线

效果如下：

（5）修改y轴标签、y轴轴线及y轴分割线配置

效果如下：

（6）修改柱状图宽度及添加圆角

效果图如下：

(7)让图表自适应网站缩放

window.addEventListener("resize", function() {
    mychart.resize();
})

4、源码

$(document).ready(function() {
    var myChart = echarts.init(document.getElementById("container-one-content"));
    // 123456热线
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
        },
        xAxis: [{
            type: "category",
            data: ["北京", "上海", "深圳", "广州", "武汉", "郑州", "天津"],
            axisTick: {
                alignWithLabel: true,
            },
            // x轴刻度标签配置
            axisLabel: {
                color: "rgba(0,0,0,0.6)",
                fontSize: "12"
            },
            // x轴轴线配置
            axisLine: {
                show: false,
                // 如果想要设置单独的线条样式
                // lineStyle: {
                //   color: "rgba(0,0,0,.1)",
                //   width: 1,
                //   type: "solid"
                // }
            }
        }, ],
        yAxis: [{
            type: "value",
            // y轴刻度标签配置
            axisLabel: {
                color: "rgba(0,0,0,0.6)",
                fontSize: "12"
            },
            // y轴轴线配置
            axisLine: {
                // 如果想要设置单独的线条样式
                lineStyle: {
                    color: "rgba(0,0,0,.1)",
                    width: 1,
                    type: "solid"
                }
            },
            // y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "rgba(0,0,0,.1)",
                }
            }
        }, ],
        series: [{
            name: "直接访问",
            type: "bar",
            // 修改柱状图宽度
            barWidth: "35%",
            data: [10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
                // 修改柱状图圆角
                barBorderRadius: 5
            }
        }, ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 让图表自适应网站缩放
    window.addEventListener("resize", function() {
         mychart.resize();
    })
});