v-charts 使用方法

一、安装

npm install v-charts --save

二、引用

全局引用

// 在 main.js中全局引用
import VCharts from 'v-charts'
Vue.use(VCharts)

按需引入

V-Charts的每种图表组件，都单独打包到lib文件夹下，以下为案例

lib/
line.js  -------------- 折线图
bar.js  --------------- 条形图
histogram.js  --------- 柱状图
pie.js  --------------- 饼图
ring.js  -------------- 环图
funnel.js  ------------ 漏斗图
waterfall.js  --------- 瀑布图
radar.js  ------------- 雷达图
map.js  --------------- 地图
bmap.js  -------------- 百度地图

使用时，可以直接将单个图表引入到项目中,对应上面图表看自己的项目需求

//main.js
import VeLine from 'v-charts/lib/line'
Vue.component(VeLine.name,VeLine)

三、使用

1.折线图

<ve-line :data="countData" :legend-visible="false" :settings="chartSettings"></ve-line>

<script>
data: {
  return: {
    chartSettings: {
    xAxisType: "time",
    area: false, // 是否对折线下面进行颜色填充
    axisSite: {left: ["orderCount"]}, // left： 为左边要显示的数据，right：为右边要显示的数据。数据要一致。
    labelMap: {orderCount: "订单数量"} // 订单数量前面的变量要和axisSite 里面的变量相对应，这样鼠标经过时才会显示 ‘订单数量’
    },
    countData: {
    // columns 里面放的是要展示的数据
    columns: ["dateTime","orderCount","totalAmount","totalShareAmount","netProfit"],
    // 写入数据的地方
    rows: [{ date: "2018-11-01", orderCount: 10, totalAmount: 1093, netProfit: 100, totalShareAmount: 50 }]
    },
   loading: false,
   dataEmpty: false
 }
}
</script>

微信截图_20200330161245.png

2.柱状图

<ve-histogram :data="countData" :legend-visible="false" :settings="chartSettings"></ve-histogram>

微信截图_20200330161915.png

3.饼状图

<ve-pie :data="countData" :legend-visible="false" :settings="chartSettings"></ve-pie>

微信截图_20200330162027.png

以上图片都经过后台数据传入的出的效果

事件

使用方法

<ve-ring :data="chartData" :extend="extend"></ve-ring>

data() {
  this.extend = {
      readyOnce: function () {
          // 渲染完成
      },
      click: function (e) {
          // 点击事件
        }
    };
  return {
    chartData: {}
  }
}

官方文档连接:https://v-charts.js.org

其他效果图请进入原文处查看
作者：美人宋
链接：https://www.jianshu.com/p/e24a90f532ae
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。