vue2 之图表控件v-charts柱状图简单实例

image.png

安装

npm i v-charts echarts -S

引入（main.js）

import VCharts from 'v-charts'

Vue.use(VCharts)

组件使用

v-charts中文文档点击查看

常见问题

• v-charts没有封装的数据如何使用，比如柱状图的宽度和表头？

解决方式：使用extend设置echart的详细属性

export default {
  data() {
    this.chartExtend = {
      title: {
        text: '舱单数据'
      },
      series: {
        barWidth: 40,
      }
    }
    return {}
}

image.png

其他v-charts没有的但是echarts有的属性盖怎么做我就不一一展开演示了，一通百通。