echarts x轴像直尺一样设置刻度_ECharts 柱状图的使用

今天使用 ECharts 制作了 柱状图，最主要的还是 配置项，可以设置 y，x轴，数据等样式，他的配置项很多，我们要到 官网的教程中查文档，才能更好的制作我们想要的图形；

进入官网 > 文档 > 配置项手册，查看各个配置项的具体属性；

注意：

1.  如果一个页面中想放多个 图表，那就要创建多个 echarts 实例，可能起名字就会麻烦一下，但把每个 图表的代码，分别放到 立即执行 函数中，就不会造成变量的污染，还方便起名字；

(function () {  // 初始化实例  let myhart = echarts.init(xx);  option: { xx... };  myhart.setOption(option);    // 让图表自适应  window.addEventListener('resize', () => {    // 调用 echarts 的方法，实现图表自适应    myhart.resize();  })})();(function () {  let myhart = echarts.init(xx);  .....  myhart.setOption(option);  .....})();

2.  如果需要在 左右俩侧的y轴 都显示文字，可以把 yAxis  设置为数组，然后添加2个 对象类型的值，一个左，一个右；

    yAxis: [      {        type: 'category',        // 刻度标签的样式        axisLabel: {          color: '#fff'        },        // 是否显示坐标轴线        axisLine: {          show: false        },        // 是否是反向坐标轴        inverse: true,        data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"]      },      {        type: 'category',        axisLabel: {          color: '#fff'        },        axisLine: {          show: false        },        // 是否是反向坐标轴        inverse: true,        data: [702, 350, 610, 793, 664]      }    ],

3.  如果要实现外面有边框，里面有填充颜色，这种做法，就可以给 series 的每项添加  yAxisIndex 属性，他进行定位后 和 z-index 的效果一样，外面边框的为 0，里面填充颜色的为 1；这样他们就会定位在同一个位置 还有 层叠的效果；

series: [  // 2个对象，对应 一个刻度标签 有 2个柱状  {    yAxisIndex: 0  },  {    yAxisIndex: 1  }]