v-charts 爬坑之路~!~

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 上的回复，分析出最好的方式是采用其所说的第三种，最后实现了效果图上的需求，下面是主要的设置代码：

          "series.0.barMaxWidth": 10,
          "series.1.barMaxWidth": 10,
          "series.0.label": {
            show: true,
            position: "top",
            color: "#91fcf2",
            fontSize: "10px",
            formatter: "{c}"
          },
          "series.1.label": {
            show: true,
            position: "top",
            color: "#91fcf2",
            fontSize: "10px",
            formatter: "{c}"
          },
          "series.0.itemStyle.color": {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4491f7" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#77f2fc" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          "series.1.itemStyle.color": {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "yellow" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "green" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },

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

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

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

• 如何修改

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

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

            // 修复 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
          if (isChina) {
              import("echarts/map/json/china.json").then(main => {
                // 修改地图引用的 json 文件
                me.mapChart.chartSetting.mapOrigin = main;
              });
            } else {
              import(`echarts/map/json/province/${
                data.data.role_pinyin
              }.json`).then(main => {
                // 修改地图引用的 json 文件
                me.mapChart.chartSetting.mapOrigin = main;
              });
            }