最近一段时间，开发用到了Echarts展示一些数据，但是在开发中，往往没有想想的那么美好，你无法想想，一个数据的name名过长，怎么在柱状图的横坐标展示，你也无法想想数据相差太大，还要去点击每一根柱子，触发事件。

首先，创建Echarts容器

//Echarts.vue
<template>
  <div :id="container" :style="{width:size.width,height:size.height}"></div>
</template>
<script>
export default {
  name: "DataEcharts",
  data() {
    return { echart: null};
  },
  props: {  
    options: {type: Object},
    container: String,
    size: {
      type: Object,
      default() {
        return {
          width: "35%",
          height: "400px",
          arr: []
        };
      }
    }
  },
   watch: {
    options: {
      deep: true,
      immediate: false,
      handler(val) {
        if (this.echart) {
          this.echart.setOption(this.options);
        }
      }
    }
  },
  create(){ this.init()},
  methods:{
    init() {
      this.$nextTick(() => {
        this.echart = this.$echarts.init(
          document.querySelector(`#${this.container}`)
        );
      })
     },
   },
}

</script>

1. 把所有要用到的可视化图，放在一个js文件里，比如柱状图、仪表盘、饼状图、折线图。例如：

//这里只展示一个柱状图==========以对象的形式
export default {
  keybar: {
    color: ['#3398DB'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {  // 坐标轴指示器，坐标轴触发有效
      type: 'shadow'// 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['直接访问'],
       align: 'left',
      left: 'center',
     top:'20px'
     },
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
          alignWithLabel: true
        },
        backgroundColor: '#4472C5',
        textStyle: {//图例文字的样式
          color: '#4472C5',
          fontSize: 16
        }
      }
    ],
    yAxis: [{type: 'value'}],
    series: [
      {
        name: '直接访问',
        type: 'bar',
        barWidth: '40%',
        data: [10, 52, 200, 334, 390, 330, 220]
      },
    ]
  },
  }

2. 这里我将Echarts.vue注册在main.js里，然后在需要用到的组件里引用上面的js文件。

//main.js
import TestEcharts from './components/DataEcharts.vue';
Vue.component('VDataEcharts', TestEcharts)

//testData.vue组件里使用echarts
//引入js文件
import options from "../components/echarts.js";
export default {
  data() {
    return {
    options,
     container: //容器
        keybar: "keybar",//js文件里的
      },
    }
   },
}
//template模板中
<TestEcharts
    v-if="showbar"
     :container="container.keybar"
     :size="{ width: '100%', height: '400px' }"
     :options="container.keybar"
     @analysisChart="caseChartBar">
</TestEcharts>

• 像这样

• 可以这样做

//这里就不做数据处理===只是改下样式
options.keybar.xAxis=[{
		type: 'category',
		data: [],
		axisTick: {
			alignWithLabel: true
		},
		axisLabel: {    //重点在这一块，其余可以忽略
			interval: 0,   //这个一定要有，别忘记了
			rotate: 15,//旋转的角度,
			textStyle: {
				color: '#000',
				fontSize: 10
			}
		},
   }]

• 也可以这样做

  tooltip: {
         trigger: caseName.length > 20 ? "item" : "axis",
         //当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据。
         enterable: true,
         },
  legend: {
        data: caseName,//将横坐标展示的内容，显示在这里
        type: "scroll",//超出，出现横向翻页
        height: 24,
        padding: [10, 10, 10, 10],
       },

如图：

需求中，需要触发每根柱子点击事件，但是有的数据相差很大，较小的数据，显示得就不很明显，如：

• 可以这样做

//type类型：'value'，数值轴，适用于连续数据。
// 'category'，类目轴，适用于离散的类目数据。
//'time'，时间轴，适用于连续的时序数据
//'log'，对数轴。适用于对数数据。
 yAxis: [
     {
       type: "log",//在这里，用'log'，不根据数据value定义刻度
        position: "left",
        min: -1,
        splitNumber: 10,
     },
   ],
series:[{
    barMaxWidth: 15,
    barMinHeight: 10,//柱子得最小高度是10
       barGap: "100%",
       data: [val.planNums],
       itemStyle: {
         normal: {
           label: {
             show: true,
             position: "top",//每个数值在柱子顶部显示 ，有利于观看
             textStyle: {
               fontSize: 12,
             },
           },
        },
     },
   }
   ]

以上就是处理得方式，肯定还有很多，写的不好，相互指教，谢谢！(●’◡’●)