数据可视化ECharts:定制柱状图bar

柱状图图表（两大步骤）

- 官网找到类似实例， 适当分析，并且引入到HTML页面中

- 根据需求定制图表

1. 引入到html页面中

为了防止变量污染，减少命名冲突，我们可以采取立即执行函数的写法。因为里面的变量都是局部变量

 配置对象就是直接复制option里面的东东

基本上的效果

2. 根据需求定制

 - 修改图表柱形颜色  #2f89cf

 - 修改图表大小  top 为 10px   bottom 为  4%    grid决定我们的柱状图的大小

 color: ["#2f89cf"],
   grid: {
     left: "0%",
     top: "10px",
     right: "0%",
     bottom: "4%",
     containLabel: true
   },

 - X轴相关设置  xAxis

     - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px

     - X轴线的样式 不显示

 // 设置x轴标签文字样式
  // x轴的文字颜色和大小
        axisLabel: {
          color: "rgba(255,255,255,.6)",
          fontSize: "12"
        },
   //  x轴样式不显示
   axisLine: {
       show: false
       // 如果想要设置单独的线条样式 
       // lineStyle: {
       //    color: "rgba(255,255,255,.1)",
       //    width: 1,
       //    type: "solid"
      }
   }

 - Y 轴相关定制

     - 文本颜色设置为   rgba(255,255,255,.6)   字体大小为 12px

     - Y 轴线条样式 更改为  1像素的  rgba(255,255,255,.1) 边框

     - 分隔线的颜色修饰为  1像素的  rgba(255,255,255,.1)

 // y 轴文字标签样式
   axisLabel: {
         color: "rgba(255,255,255,.6)",
          fontSize: "12"
   },
    // y轴线条样式
    axisLine: {
         lineStyle: {
            color: "rgba(255,255,255,.1)",
            // width: 1,
            // type: "solid"
         }
   5232},
    // y 轴分隔线样式
   splitLine: {
       lineStyle: {
          color: "rgba(255,255,255,.1)"
        }
   }

设置完成后

 - 修改柱形为圆角以及柱子宽度  series 里面设置 

 series: [
         {
           name: "直接访问",
           type: "bar",
           // 修改柱子宽度
           barWidth: "35%",
           data: [10, 52, 200, 334, 390, 330, 220],
           itemStyle: {
             // 修改柱子圆角
             barBorderRadius: 5
           }
         }
       ]

 可以把这个影子变成一个线

 更换对应数据

// x轴中更换data数据

    data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],

   // series 更换数据

    data: [200, 300, 300, 900, 1500, 1200, 600]

不全的把fontSize:"10",再加一个interval:0  // 0是全部显示   1的话是隔一个显示一个, 文档是个好东西

 让图表跟随屏幕自适应

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

完整代码

// 柱状图模块1
(function(){
    // 实例化对象
    var myChart=echarts.init(document.querySelector('.bar .chart'))
    // let myChart=echarts.init(document.querySelector(".bar .chart"));
    // 2指定配置项
    var option = {
        color: ["#2f89cf"],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //   鼠标放在上面的样子 
            type: 'shadow'
          }
        },
        // 修改图表大小
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
            axisTick: {
              alignWithLabel: true
            },
            // 设置x轴标签文字样式
    // x轴的文字颜色和大小
        axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "10",
            interval:0
          },
     //  x轴样式不显示
     axisLine: {
         show: false
         // 如果想要设置单独的线条样式 
         // lineStyle: {
         //    color: "rgba(255,255,255,.1)",
         //    width: 1,
         //    type: "solid"
        }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
                color: "rgba(255,255,255,.6)",
                 fontSize: "12"
          },
           // y轴线条样式
           axisLine: {
                lineStyle: {
                   color: "rgba(255,255,255,.1)",
                   // width: 1,
                   // type: "solid"
                }
          },
           // y 轴分隔线样式
          splitLine: {
              lineStyle: {
                 color: "rgba(255,255,255,.1)"
               }
          }
          }
          
        ],
        series: [
            {
              name: "直接访问",
              type: "bar",
              // 修改柱子宽度
              barWidth: "35%",
              data: [200, 300, 300, 900, 1500, 1200, 600],
              itemStyle: {
                // 修改柱子圆角
                barBorderRadius: 5
              }
            }
          ]
      };
    //   3.把配置项给实例对象
    myChart.setOption(option)
    //4.让图表跟随屏幕自动去适用
    window.addEventListener("resize", function() {
        myChart.resize();
      });
})();