echarts之柱状图（1）

PS相关学习资料链接：Pink老师的教程分解，O(∩_∩)O哈哈~

<div class="bar">
    <h2>就业行业
        <a href="javascript:;">2019</a>
        <a href="javascript:;">2020</a>
    </h2>
    <div class="chart">
    </div>
</div>

css自行设置，类名为chart的div要有宽高。

javascript:

//立即执行函数
(function() {
    //1 实例化对象
    var myChart = echarts.init(document.querySelector(".bar .chart"));
    //2 指定配置和数据
    var option = {
        color: ["#2f89cf"],//柱子的颜色
        //提示框
        tooltip: {
            trigger: "axis", //触发类型:axis类目轴或item非类目轴
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        //图表大小
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true //grid 区域是否包含坐标轴的刻度标签
        },
        //x轴
        xAxis: [{
            type: "category",
            boundaryGap: true, // 坐标轴两边留白(默认就是true)
            data: [
                "旅游行业",
                "教育培训",
                "游戏行业",
                "医疗行业",
            ],
            //坐标轴刻度相关设置
            axisTick: {
                alignWithLabel: true //刻度线和标签对齐
            },
            //坐标轴刻度标签
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            //坐标轴轴线
            axisLine: {
                show: false //不显示
            }
        }],
        //y轴
        yAxis: [{
            type: "value",
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.6)",
                    fontSize: "12"
                }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                    // width: 1,
                    type: "solid"
                }
            },
            splitLine: { //坐标轴在 grid 区域中的分隔线(默认数值轴显示，类目轴不显示)
                lineStyle: {
                    // color: 'yellow'
                    color: "rgba(255,255,255,.1)"
                }
            }
        }],
        series: [{
            name: "直接访问",
            type: "bar",
            barWidth: "35%", //柱子的宽度
            data: [200, 300, 300, 900],
            itemStyle: {
                barBorderRadius: 5 //圆角
            }
        }]
    };

    //3 把配置给实例对象
    myChart.setOption(option);

    //让图表跟随屏幕自适应
    window.addEventListener("resize", function() {
        myChart.resize();
    });

    // 数据变化
    var dataAll = [
        { year: "2019", data: [200, 300, 300, 900] },
        { year: "2020", data: [300, 400, 350, 800] }
    ];

    //jquery写法：点击不同的a标签，改变series中的data
    $(".bar h2 ").on("click", "a", function() {
        //console.log($(this).index());//0或1
        option.series[0].data = dataAll[$(this).index()].data;
        myChart.setOption(option);
    });
})();