20201214 新增

  • 推荐使用官推的 vue-echarts，“亲儿子” 哈哈 待遇确实是好

vue-echarts npm 地址
vue-echarts github 地址

资料

v-charts 官网)
v-charts github 地址

开始爬坑

1. echarts上的所有 配置方法，其实都可以在 v-charts 组件的 extend 属性中进行设置

echarts 配置官网)
v-charts官网提供的 extend 属性的使用 demo)
`extend` 使用示例

2. 关于 extend 中设置 series 时无法像 echarts 那样值设置成数组的问题

echarts 的使用示例 demo)

因为项目有需求如下图所示：
需求效果图
这个参照 echarts 的配置是需要将 series 设置成数组，分别设置相应的渐变颜色，但是 v-charts 不能写成数组形式的，参照 v-charts 作者在 github 上的回复，分析出最好的方式是采用其所说的第三种，最后实现了效果图上的需求，下面是主要的设置代码：

  1.           "series.0.barMaxWidth": 10,
  2.           "series.1.barMaxWidth": 10,
  3.           "series.0.label": {
  4.             show: true,
  5.             position: "top",
  6.             color: "#91fcf2",
  7.             fontSize: "10px",
  8.             formatter: "{c}"
  9.           },
  10.           "series.1.label": {
  11.             show: true,
  12.             position: "top",
  13.             color: "#91fcf2",
  14.             fontSize: "10px",
  15.             formatter: "{c}"
  16.           },
  17.           "series.0.itemStyle.color": {
  18.             type: "linear",
  19.             x: 0,
  20.             y: 0,
  21.             x2: 0,
  22.             y2: 1,
  23.             colorStops: [
  24.               {
  25.                 offset: 0,
  26.                 color: "#4491f7" // 0% 处的颜色
  27.               },
  28.               {
  29.                 offset: 1,
  30.                 color: "#77f2fc" // 100% 处的颜色
  31.               }
  32.             ],
  33.             global: false // 缺省为 false
  34.           },
  35.           "series.1.itemStyle.color": {
  36.             type: "linear",
  37.             x: 0,
  38.             y: 0,
  39.             x2: 0,
  40.             y2: 1,
  41.             colorStops: [
  42.               {
  43.                 offset: 0,
  44.                 color: "yellow" // 0% 处的颜色
  45.               },
  46.               {
  47.                 offset: 1,
  48.                 color: "green" // 100% 处的颜色
  49.               }
  50.             ],
  51.             global: false // 缺省为 false
  52.           },

3. 由于做的项目无法访问外网的机制，导致 map 组件中，远程请求的对应地图 .json 文件，无法获取到展现便是空白了

  • 先说下 v-charts -> map 组件默认的机制

在 chartSetting.position 设置了地址之后，组件会直接请求相应的 cdn https://unpkg.com/echarts@3.6.2/map/json/ 下的 .json 文件；因为是外网环境，所以说需要修改一下这个机制

  • 如何修改

在查阅 github 的 issues 列表后 -> 找到了该问题
在问题列表下面作者也提供了完整的使用 demo

  • 结合上面找到的解决方法，下面贴一下我的使用方式的主要代码部分 ```

    1.       // 修复 v-charts 插件使用的地图控件的路径问题：默认是用的 https://unpkg.com/echarts@3.6.2/map/json/ ，修改后使用 echarts/map/json； demo 地址：https://github.com/ElemeFE/v-charts/blob/70af7460e9aae9448bc98127814297cd098c2e65/examples/pages/test.vue
    2.     if (isChina) {
    3.         import("echarts/map/json/china.json").then(main => {
    4.           // 修改地图引用的 json 文件
    5.           me.mapChart.chartSetting.mapOrigin = main;
    6.         });
    7.       } else {
    8.         import(`echarts/map/json/province/${
    9.           data.data.role_pinyin
    10.         }.json`).then(main => {
    11.           // 修改地图引用的 json 文件
    12.           me.mapChart.chartSetting.mapOrigin = main;
    13.         });
    14.       }

```