Echarts图表(数据可视化)&&Echarts配置

文档、示例地址：https://info.swufe.edu.cn/netinfo/echarts/index.html
https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-d6q92cwh.html
附一个超全的echarts配置：echarts超全配置

• 圆柱上方数字倾斜：

series: [{
  type: 'bar',
  data: value,
  label: {
    show: true, // 开启显示
    rotate: 70, // 旋转70度
    position: 'top', // 在上方显示
    distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    verticalAlign: 'middle',
    textStyle: { // 数值样式
      color: 'black',
      fontSize: 12
    }
  }
}]

• x轴全部显示，并且倾斜

 xAxis : [
			        {
			        	name : '日期',
			            type : 'category',
                        data : this.xArray,
                        axisLabel:{
                            interval:0, //x轴数据全部显示
                            rotate: 60,//倾斜60度
                          /*   formatter:function(value)  
                               {  //x轴文字竖直展示
                                   return value.split(“”).join(“\n”);  
                               }  */
                        }
			        }
                ],

interval
x坐标轴刻度标签的显示间隔(在类目轴中有效)，默认会采用标签不重叠的方式显示标签（默认会显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

rotate
标签倾斜的角度，在类目轴的类目标签显示不全时可以通过旋转防止标签重叠（官方这样说的）旋转的角度是-90到90度
问题又来了，这个名称x轴的文字如果太长会受到遮挡，还是显示不全，这个时候可以用grid属性解决

grid: {
left: '10%',
bottom:'35%'
},

• y轴显示
  https://www.cnblogs.com/hao-1234-1234/p/11696796.html
• 构建echarts

 <div  :class="className" id="countTime" style="width: 1080px;height:400px;padding:10px 10px 10px 10px">
        </div>

import echarts from 'echarts'
require('echarts/theme/macarons')

props: {
    className: {
    type: String,
    default: 'chart'
    }
 },

mounted(){
     this.$nextTick(() => {
      this.initChart()
    })
},

initChart(){
   var echartsType = this.series;//动态y轴单位，需要自定义
   var myChart = echarts.init(document.getElementById('countTime'),'macarons');//初始化图标皮肤
   myChart.clear();//点击就会刷新
   var callTimes = {
   		title : {
      text: this.formatEchartDate(this.timePicker),
  },
  tooltip : {
      trigger: 'axis'
  },
  toolbox: {
      show : true,
      feature : {
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
      },
      right:'100px'
  },
  calculable : true,
  xAxis : [
      {
      	name : '日期',
          type : 'category',
                   data : this.xArray,//自定义x轴数组
                   axisLabel:{
                       interval:0, //x轴数据全部显示
                       rotate: 60,//x轴旋转60度
                   }
      }
     ],
  yAxis : [
      {
      	name : this.yAxis,
                   type : 'value',
                   axisLabel:{
          	formatter:function(v){
                           if(echartsType == "成功率"){
                                return v+'%';
                           }else{
                               return v;
                           }
                        }
          }
      }
  ],
		series : [
		{
           name:this.series,
           type:'bar',
           itemStyle: {
                       normal: {
                           color: 'tomato',
                           barBorderColor: 'tomato',
                           barBorderWidth: 6,
                           barBorderRadius:0,
                           label : {
                               show: true, position: 'top',
                               rotate: 60,
                               distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                               verticalAlign: 'middle',
                              formatter:function(v){
                                   if(echartsType == "成功率"){
                                       return v.data+'%';
                                   }else{
                                       return v.data;
                                   }
                              }
                           }
                       }
                   },
                data:this.yArray//自定义data数组
                }
		    ]
           };
       myChart.setOption(callTimes);
    },

附：给一个时间格式化组件moment：

formatDate(time) {
return moment(time).format(“YYYY-MM-DD HH:mm:ss”);
},