关于javascript:vueecharts初次体验

前言

最近公司我的项目的图表组件换成 Vue-Echarts。嗯，该怎么说呢？

震惊之后，该改的代码还是要改，我负责的内容局部波及到图表的应用，因为这文章，它不就来了嘛！

应用

1. 装置

装置这一块没什么好说的，作者曾经写明确了怎么装置援用，局部援用之类的，甚至还把代码发了进去。要是不喜爱看英文文档的话，外面也有中文版的链接，我这里就间接放进去传送门

2. 应用图表组件

这里我间接摘抄作者的例子

<template>
  <v-chart class="chart" :option="option" />
</template>

<script>
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart} from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, {THEME_KEY} from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: "HelloWorld",
  components: {VChart},
  provide: {[THEME_KEY]: "dark"
  },
  data() {
    return {
      option: {
        title: {
          text: "Traffic Sources",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines"
          ]
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [{ value: 335, name: "Direct"},
              {value: 310, name: "Email"},
              {value: 234, name: "Ad Networks"},
              {value: 135, name: "Video Ads"},
              {value: 1548, name: "Search Engines"}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.chart {height: 400px;}
</style>

// tip: 每一个图表须要设置高度，否则是不显示的

通过官网的例子，咱们能够理解到比较复杂的是在于图表的配置项 option，而 option 的配置项，咱们能够参考 echarts 的配置
。
到这里，文章就完结了（这也太水了吧！）。

俗话说了，没有问题，也要发明问题。

因为我次要是解决我负责的那块图表问题，所以并没有尝试所有的图表，这里只是列举我遇到的两个图表问题：

1. 地图

上图是效果图，这种成果的配置项能够在 echarts 的配置项外面找，我也在 echarts 的示例外面找了一个配置项比拟相似的例子（传送门）, 能够借（fu）鉴（zhi）外面的配置。
有一点是须要留神的是，地图是须要本人援用的，而 vue-echarts 外面也有地图文件，所以咱们须要援用地图文件

// main.js    援用地图文件
import chinaMap from './common/map/china.json'
import worldMap from './common/map/world.json'
import {registerMap} from 'echarts/core'
registerMap('china', chinaMap)
registerMap('world', worldMap)

// 配置
// 地图
map: {
    textStyle: {fontFamily: 'Inter,"Helvetica Neue", Arial, sans-serif'},
    title: {
        text: '粉丝地区散布状况',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    series: [
        {
            name: '地区散布',
            type: 'map',
            map: 'china',
            data: []}
    ]
}    

2. 词云图

上图是 echarts 词云图的实现成果。词云图的配置项在当初的 echarts 版本中是找不到了，网上有相干的 echarts 的词云图依赖包（传送门）,
作者也是将应用的办法和配置项写进去了，所以这一块也没有什么好说的。

须要留神的是，因为我一开始是不晓得有这个的，也是依据网上的文章找到的，然而可能是我找到的文章年代有点长远，外面的配置项说到一点是配置随机色彩这一块，外面是这么写的：

series: [{
    // ……其余配置项
    testStyle: {
        normal: {color: // 随机色彩 code}
    }
}]

这样子配置我这边是怎么都不会失效，须要把外面的 normal 那一层去掉，即：

series: [{
    // ……其余配置项
    testStyle: {color: // 随机色彩 code}
}]

因为波及到的图表不多，所以遇到的问题也没有多少，这里做一下记录，不便当前查找。

参考资料

vue-echarts 的 demo

Vue 我的项目应用 echarts 实现词云图

原文链接