介紹

在使用echarts生成圖表時，經常需要做繁瑣的數據類型轉化、修改復雜的配置項，v-charts的出現正是為了解決這個痛點?；赩ue2.0和echarts封裝的v-charts圖表插件，只需要統一提供一種對前后端都友好的數據格式設置簡單的配置項，便可輕松生成常見的圖表。

安裝

npm install v-charts echarts --save 或者 npm i v-charts echarts -S

項目引用

main.js

import Vue from 'vue'; import VCharts from 'v-charts';Vue.use(VCharts);

示例

<template><ve-pie :data="chartData" :extend="chartExtend" :colors="colors" :settings="chartSettings"></ve-pie> </template><script> export default {data() {return {colors: ["#348fe2", "#00acac", "#007bff", "#20c997"],chartExtend: {legend: {itemHeight: 14,icon: "circle",formatter: function(name) {// 圖例組件顯示信息return name;}},series: {type: '圖類型',center: ['',''],調整圖所在位置，默認50%,50%,居中顯示tooltip: {trigger: 'item',formatter: function(params, ticket, callback) {// 組合整理數據 選中顯示的信息return params; }}}},chartSettings: {roseType: "radius",radius: 100},chartData: {columns: ["status", "num"],rows: [{ status: "北京", num: 93 },{ status: "上海", num: 83 },{ status: "廣州", num: 88 },{ status: "深圳", num: 66 }]}};} }; </script>

官網鏈接：https://v-charts.js.org/#/

總結

以上是生活随笔為你收集整理的v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。