e-charts自定义柱状图

先看完成效果，是这样子的：

可以说把默认的e-charts柱状图改的7788了。 罗列出来以下几点：

1、去掉y轴（刻度值的）刻度线

2、去掉y轴（刻度值的）边框

3、改变柱状图颜色为渐变色

4、tooltip显示横坐标的值（数字）+横坐标单位（月）

5、自定义tooltip左侧小圆点

6、xy轴文字属性设置

7、y轴分割线颜色（与x轴等长的横向刻度线颜色）

8、修改x轴（刻度值的）刻度线颜色

9、修改x轴（刻度值的）边框颜色

10、xy轴单位的文字颜色（万元、间）

下面来看具体代码：

<div id="part3" style="width: 100%;height:240px;"></div>

<script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
//第三部分
    var dom3 = document.getElementById("part3");
    var myChart3 = echarts.init(dom3);
    var app3 = {};
    option3 = null;
    app3.title = '2019年收入月趋势';

    option3 = {
        tooltip: {
            //坐标轴触发
            trigger: 'axis',
            formatter: function( params ) {
                return formatterTip(params,3);
            }
            //显示横向精确数值
            /*axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#8db0ef'
                }
            }*/
        },
        toolbox: {
            show: false,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        //xy轴单位的颜色
        textStyle: {
            color: '#466293'
        },
        /*legend: {
            data:['房源量']
        },*/
        xAxis: [
            {
                type: 'category',
                name: '(月)',
                data: ['1','2','3','4','5','6','7','8','9','10','11','12'],
                axisPointer: {
                    type: 'shadow'
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 16,
                        color: '#466293',
                        fontFamily: 'DINProRegular'
                    }
                },
                //x轴刻度线颜色
                axisTick: {
                    show: true,
                    lineStyle: {
                        color: '#00345c',
                    } 
                },
                //x轴刻度边框颜色
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#00345c',
                    } 
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '（万元）',
                min: 0,
                max: 80,
                interval: 20,
                //y轴文字属性设置
                axisLabel: {
                    textStyle: {
                        fontSize: 16,
                        color: '#466293',
                        fontFamily: 'DINProRegular'
                    },
                    formatter: '{value}'
                },
                //y轴横向分割线颜色
                splitLine: {
                    show: true,
                    lineStyle: {
                       color: '#0c3668' 
                    }
                },
                //y轴刻度线颜色
                axisTick: {
                    show: false,
                    lineStyle: {
                        color: '#00345c',
                    } 
                },
                //y轴边框颜色
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#00345c',
                    } 
                }
            },
           
        ],
        series: [
            {
                name:'收入',
                type:'bar',
                data:[35.419401,48.0000,59.615199,67.222390,68.203307,52.252429,35.99902,59.810870,45.242007,62.316957,49.1096,50.76565],
                itemStyle: {
                    //柱条渐变色
                    color:new echarts.graphic.LinearGradient(
                        1, 0, 0, 1,
                        [
                            {offset: 0, color: '#95dc4e'},
                            {offset: 1, color: '#f6c100'}
                        ]
                    )
                }
            }
        ]
    };
    ;
    if (option3 && typeof option3 === "object") {
        myChart3.setOption(option3, true);
    }

    //自定义柱状图tooltip
    function formatterTip(params,a) {
        var tip = '';
        //自定义左边的那个小圆圈
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f6c100"></span>';
        for (var i = 0; i < params.length; i++) {//这里是自己定义样式， params[i].marker 表示是否显示左边的那个小圆圈
            if (params[i].value != 0) {
                if(a == 3){
                    tip += params[i].name + '月' + '<br/>' + dotHtml + params[i].seriesName + '：' + params[i].value + '万元';
                }
            }
        }
        return tip;
    }
</script>

只需要一个div和js即可，无需自己额外写样式。

如果一开始不知道怎么写，可以去官网上模拟，然后下载下来复制粘贴到本地。

步骤：

官网实例->改变左侧参数->点击运行右侧时时改变->右下角下载

https://www.echartsjs.com/examples/zh/editor.html?c=bar-tick-align

下载的是一个html。复制其中的js内容即可。自己在引入 jquery.js和echart.js，不需要他html里的那么多js。最后在调整参数。

改配置也不难，就是要花时间看。去官网文档里面搜索关键词，查看参数配置，比如xAxis：

https://www.echartsjs.com/zh/option.html#xAxis

 

挨个对照看就知道怎么改了。就怕不知道搜什么关键词就麻烦了，只能先百度慢慢试。