文档地址： https://v-charts.js.org/#/

在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。

安按照文档引入之后，运行项目，如果报错

This dependency was not found:
* echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.js
To install it, you can run: npm install —save echarts/lib/visual/dataColor

降级echarts到v4.9.0即可

npm i v-charts echarts@4.9.0 -S

图表 公有属性

所有图表都具有的属性，例如 width, events 等。

:data 设置图表的数据

:setting 图表自身属性

用于设置图表自身属性，例如用于设置数据类型的 yAxisType, 是否展示为面积图的 area等，因为每种图表的自有属性不完全相同，将在具体图表中详细介绍setting的使用。

  1. <ve-line :data="lineChartData" :settings="lineChartSettings"></ve-line>
  3. data() {
  4.     this.lineChartSettings = {
  5.       stack: { 用户: ["访问用户", "下单用户"] },
  6.       area: true, // 折线图 -- 填充整个面积的色块
  7.     };
  8.     return {
  9.       lineChartData: {
  10.         columns: ["日期", "访问用户", "下单用户", "下单率"],
  11.         rows: [
  12.           { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
  13.           { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
  14.           { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
  15.           { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
  16.           { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
  17.           { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
  18.         ],
  19.       }
  20.     };
  21.   }

image.png

:extend

为了能够更方便的设置属性配置项等，可以通过extend属性实现对已配置好的内部属性进行单独的设置

:loading 图表加载状态

  1. <ve-line
  2.     :data="chartData"
  3.     :loading="loading">
  4.  </ve-line>
  5. import 'v-charts/lib/style.css'
  6. loading: true

:data-zoom 设置区域缩放

在使用 dataZoom 组件时，数据发生改变会引起 dataZoom 的重置，在组件上设置:not-set-unchange="['dataZoom']"即可解决这个问题。

:colors 修改颜色列表

  1. <template>
  2.   <ve-line
  3.     :data="chartData"
  4.     :colors="colors">
  5.   </ve-line>
  6. </template>
  8. <script>
  9.   export default {
  10.     data () {
  11.       this.colors = ['#c23531','#2f4554', '#61a0a8',
  12.         '#d48265', '#91c7ae','#749f83', 
  13.         '#ca8622', '#bda29a','#6e7074',
  14.         '#546570', '#c4ccd3']
  15.       return {
  16.         chartData: {
  17.           columns: ['日期', '成本', '利润'],
  18.           rows: [
  19.             { '日期': '1月1日', '成本': 15, '利润': 12 },
  20.             { '日期': '1月2日', '成本': 12, '利润': 25 },
  21.             { '日期': '1月3日', '成本': 21, '利润': 10 },
  22.             { '日期': '1月4日', '成本': 41, '利润': 32 },
  23.             { '日期': '1月5日', '成本': 31, '利润': 30 },
  24.             { '日期': '1月6日', '成本': 71, '利润': 55 }
  25.           ]
  26.         }
  27.       }
  28.     }
  29.   }
  30. </script>

Demo

柱形图

image.png

  1. template>
  2.   <div>
  3.     <div class="card-panel">
  4.       <h3>报价台量</h3>
  5.       <ve-histogram
  6.         class="myve"
  7.         :data="chartData"
  8.         :settings="vchartsConfig.setting"
  9.         :extend="vchartsConfig.extend"
  10.       ></ve-histogram>
  11.     </div>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   name: "AreaChart",
  19.   data() {
  20.     return {
  21.       // v-charts配置参数
  22.       vchartsConfig: {
  23.         setting: {
  24.           // 别称
  25.           labelMap: {
  26.             area: "地区",
  27.             count: "报价台量",
  28.           },
  29.         },
  30.         extend: {
  31.           // 左上角图表标题
  32.           title: {
  33.             show: true,
  34.             text: "",
  35.             subtext: "各城市台量",
  36.             // textAlign:'center',
  37.           },
  38.           // 图表上方的维度标题及按钮
  39.           legend: {
  40.             show: true,
  41.           },
  42.           // backgroundColor:'red',//整个组件的背景颜色
  43.           //X轴线
  44.           xAxis: {
  45.             // name: "地区",
  46.             type: "category",
  47.             show: true,
  48.             // 坐标轴轴线
  49.             axisLine: {
  50.               show: false,
  51.             },
  52.             // 坐标轴刻度
  53.             axisTick: {
  54.               show: false,
  55.             },
  56.             // 坐标轴每项的文字
  57.             axisLabel: {
  58.               showMaxLabel: true,
  59.               showMinLabel: true,
  60.               color: "#3a3a3a",
  61.               rotate: 0, //刻度文字旋转，防止文字过多不显示
  62.               margin: 18, //文字离x轴的距离
  63.               boundaryGap: true,
  64.               // backgroundColor:'#0f0',
  65.               formatter: (v) => {
  66.                 // console.log('x--v',v)
  67.                 if (v.length > 5) {
  68.                   return v.substring(0, 5) + "...";
  69.                 }
  70.                 return v;
  71.               },
  72.             },
  73.             // X轴下面的刻度小竖线
  74.             axisTick: {
  75.               show: false,
  76.               alignWithLabel: true, //axisLabel.boundaryGap=true时有效
  77.               interval: 0,
  78.               length: 4, //长度
  79.             },
  80.             // x轴对应的竖线
  81.             splitLine: {
  82.               show: false,
  83.               interval: 0,
  84.               lineStyle: {
  85.                 color: "red",
  86.                 backgroundColor: "red",
  87.               },
  88.             },
  89.           },
  90.           yAxis: {
  91.             show: true,
  92.             offset: 0,
  93.             // 坐标轴轴线
  94.             axisLine: {
  95.               show: false,
  96.             },
  97.             // x轴对应的竖线
  98.             splitLine: {
  99.               show: false,
  100.             },
  101.             // 坐标轴刻度
  102.             axisTick: {
  103.               show: false,
  104.             },
  105.             boundaryGap: false,
  106.             axisLabel: {
  107.               color: "#3a3a3a",
  108.             },
  109.           },
  110.           // 滚动缩放组件参数
  111.           //   dataZoom: [
  112.           //     {
  113.           //       type: "inside",
  114.           //       show: true,
  115.           //       xAxisIndex: [0],
  116.           //       startValue: 0,
  117.           //       endValue: 4,
  118.           //       zoomLock: true, //阻止区域缩放
  119.           //     },
  120.           //   ],
  121.           //   dataZoom: [
  122.           //     {
  123.           //       type: "slider",
  124.           //       startValue: 0,
  125.           //       endValue: 5, //只显示5个数据
  126.           //     },
  127.           //   ],
  129.           // 柱形区域
  130.           grid: {
  131.             show: true,
  132.             backgroundColor: "#FFF6F3",
  133.             borderColor: "#FFF6F3",
  134.             // containLabel:false,
  135.           },
  137.           // 每个柱子
  138.           series(v) {
  139.             // console.log("v", v);
  140.             // 设置柱子的样式
  141.             v.forEach((i) => {
  142.               console.log("series", i);
  143.               i.barWidth = 20;
  144.               i.itemStyle = {
  145.                 barBorderRadius: [10, 10, 10, 10],
  146.                 color: "#FF6633",
  147.                 borderWidth: 0,
  148.               };
  149.               i.label = {
  150.                 color: "#666",
  151.                 show: true,
  152.                 position: "top", //top inner insideBottom insideRight
  153.                 // backgroundColor:'yellow',
  154.               };
  155.             });
  156.             return v;
  157.           },
  158.         },
  159.       },
  160.       // v-chats列表数据
  161.       chartData: {
  162.         columns: ["area", "count"],
  163.         rows: [
  164.           { area: "南宁市", count: 20 },
  165.           { area: "柳州市", count: 30 },
  166.           { area: "防城港市", count: 12 },
  167.           { area: "南市", count: 20 },
  168.           { area: "柳市", count: 30 },
  169.           { area: "防港市", count: 12 },
  170.           { area: "市", count: 20 },
  171.           { area: "柳", count: 30 },
  172.           { area: "防城市", count: 12 },
  173.           { area: "3333333", count: 42 },
  174.         ],
  175.       },
  176.     };
  177.   },
  178.   created() {},
  179.   methods: {},
  180. };
  181. </script>

柱形折线混合图

主要是 label 的设置。设置双 y 轴后 ，折线的 label 也需要设置为百分比

image.png

  1. <template>
  2.   <div class="card-panel">
  3.     <h3>每月发货台量及完成率</h3>
  4.     <ve-histogram
  5.       :data="chartData"
  6.       :settings="chartSettings"
  7.       :extend="chartExtend"
  8.     ></ve-histogram>
  9.   </div>
  10. </template>
  11. <script>
  12. import { sendChart } from "@/api/install/chart";
  13. export default {
  14.   data() {
  15.     this.chartSettings = {
  16.       showLine: ["percent"], //展示为折线图的指标
  17.       axisSite: { right: ["percent"] }, //指标所在的轴 默认不在right轴的指标都在left轴
  18.       yAxisType: ["KMB", "percent"], //左右坐标轴数据类型；  KMB, normal, percent
  19.       yAxisName: ["台量", "完成率"], //左右坐标轴标题
  20.       labelMap: { count: "发货台量", percent: "完成率" }, //设置指标的别名，同时作用于提示框和图例
  21.     };
  22.     this.chartExtend = {
  23.       // 图表上方的维度标题及按钮
  24.       legend: {
  25.         show: true,
  26.         left: "center",
  27.         bottom: "bottom",
  28.       },
  29.       // 柱形区域
  30.       grid: {
  31.         show: true,
  32.         backgroundColor: "#FFF6F3",
  33.         borderColor: "#FFF6F3",
  34.       },
  36.       //  每个柱子
  37.       series(v) {
  38.         // 设置发货台量 柱形图样式
  39.         v[0].barWidth = 30;
  40.         v[0].itemStyle = {
  41.           barBorderRadius: [15, 15, 15, 15],
  42.           color: "#727CF5",
  43.         };
  44.         v[0].label = {
  45.           color: "#3a3a3a",
  46.           show: true,
  47.           position: "top", //top inner inside insideBottom insideRight
  48.         };
  49.         // 设置完成率 折线的样式
  50.         v[1].itemStyle = {
  51.           color: "#f58634",
  52.         };
  53.         // 设置折线的 label
  54.         v[1].label = {
  55.           color: "#3a3a3a",
  56.           show: true,
  57.           position: "top",
  58.           // formatter: "{c}%", 这样设置只是在数据后加上了百分符，但没有小数部分没有没有转化为百分数
  59.           formatter: function(param){
  60.             console.log(param)
  61.             return param.value * 100 + '%'
  62.           },
  63.         };
  64.         return v;
  65.       },
  66.       yAxis: {
  67.         show: true,
  68.         offset: 0,
  69.         // y轴对应的横线
  70.         splitLine: {
  71.           show: false,
  72.         },
  73.         //这样设置的话 双 y 轴都是百分比了
  74.         // axisLabel: {
  75.         //   show: true,
  76.         //   interval: "auto",
  77.         //   formatter: "{value}%",
  78.         // },
  79.       },
  80.       // 自定义鼠标悬浮框toolTip
  81.       // tooltip: {
  82.       //   // formatter: '{b0}<br />{a0}: {c0}<br />{a1}: {c1}%', //直接这样没有前面的颜色图例
  83.       //   trigger: "axis",
  84.       //   formatter: function (params) {
  85.       //     let html = params[0].name + "<br>";
  86.       //     for (let i = 0; i < params.length; i++) {
  87.       //       html +=
  88.       //         '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
  89.       //         params[i].color +
  90.       //         ';"></span>';
  91.       //       if (params[i].seriesName == "完成率") {
  92.       //         html += params[i].seriesName + ": " + params[i].value + "%<br>";
  93.       //       } else {
  94.       //         html += params[i].seriesName + ": " + params[i].value + "<br>";
  95.       //       }
  96.       //     }
  97.       //     return html;
  98.       //   },
  99.       // },
  100.     };
  101.     return {
  102.       chartData: {
  103.         columns: ["month", "count", "percent"],
  104.         rows:  [
  105.           { month: "1月", count: 393, percent: 0.32 },
  106.           { month: "2月", count: 530, percent: 1.32 },
  107.           { month: "3月", count: 923, percent: 2.32 },
  108.           { month: "4月", count: 723, percent: 3.2 },
  109.           { month: "5月", count: 792, percent: 1.2 },
  110.           { month: "6月", count: 593, percent: 2.2 },
  111.           { month: "7月", count: 393, percent: 1.32 },
  112.           { month: "8月", count: 530, percent: 2.32 },
  113.           { month: "9月", count: 923, percent: 0.32 },
  114.           { month: "10月", count: 723, percent: 3.32 },
  115.           { month: "11月", count: 792, percent: 1.32 },
  116.           { month: "12月", count: 593, percent: 2.32 },
  117.         ],
  118.       },
  119.     };
  120.   },
  121.   mounted() {
  122.     sendChart().then((res) => {
  123.       console.log("🚀 ~ file: SendChart.vue ~ line 99 ~ sendChart ~ res", res);
  124.     });
  125.   },
  126. };
  127. </script>