v-charts采坑！！！常见图表类型的基本使用

快速上手

   1、npm i v-charts echarts -S
   2、完整引入
      // main.js
     import Vue from 'vue'
     import VCharts from 'v-charts'
     import App from './App.vue'
     Vue.use(VCharts)
  3、官方文档：https://v-charts.js.org  (个人感觉官方文档写的不是那么的清楚)

折柱混合图

// html  
<ve-histogram
    height='700px'
   :settings="chartSettings"
   :extend="chartData_bar_extend"
   :data="chartData_bar2"
/>
// data 里面的配置项
chartSettings:{
    showLine: ['准确率'],
    axisSite: { right: ['准确率'] },
    yAxisName: ['数值', '%']
},
chartData_bar_extend:{
    series:{
      barWidth:40,   // 柱状图宽度
      label: { show: true, position: "top" },  // 柱状图上面显示值
    }
 },
 chartData_bar2:{    // 折柱混合图接受的数据类型
     columns: ['time','预测', '实际','准确率'],  // 
     rows: [
        { 'time':'2022','预测': 1000, '实际': 1000, '准确率':'1.2'},
        { 'time':'2022','预测': 1000, '实际': 1000 ,'准确率':'1.2'},
        { 'time':'2022','预测': 2000, '实际': 2000 ,'准确率':'1.2'},
        { 'time':'2022','预测': 5000, '实际': 5000 ,'准确率':'1.2'}
     ]
 },

折线图

  <ve-line
    :data="chartData" 
    :extend='chartExtend' 
    :settings="chartSettings">
  </ve-line>
  // 接受的数据类型更上面基本类似
  chartData: {
     columns: ['time', '奥迪'],
     rows: [
        { 'time': '2018-01-22', '奥迪': 1000},
        { 'time': '2018-03-22', '奥迪': 1500 },
        { 'time': '2018-04-22', '奥迪': 2000 },
        { 'time': '2018-05-22', '奥迪': 5000 },
    ]
  },

饼状图

<ve-pie :data="chartData"></ve-pie>
data接收的数据类型和折线图一模一样

写在最后

写这个一是为了方便自己查阅，因为个人感觉这些配置项啥的太难记了，感觉也没必要记，哈哈，有需要的小伙伴请自己食用，欢迎一起交流学习。