前言
最近公司我的项目的图表组件换成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的配置
。
到这里，文章就完结了（这也太水了吧！）。
俗话说了，没有问题，也要发明问题。
因为我次要是解决我负责的那块图表问题，所以并没有尝试所有的图表，这里只是列举我遇到的两个图表问题：
- 地图
上图是效果图，这种成果的配置项能够在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: [] } ]} - 词云图
上图是echarts词云图的实现成果。词云图的配置项在当初的echarts版本中是找不到了，网上有相干的echarts的词云图依赖包（传送门）,
作者也是将应用的办法和配置项写进去了，所以这一块也没有什么好说的。
须要留神的是，因为我一开始是不晓得有这个的，也是依据网上的文章找到的，然而可能是我找到的文章年代有点长远，外面的配置项说到一点是配置随机色彩这一块，外面是这么写的：
series: [{ // ……其余配置项 testStyle: { normal: { color: // 随机色彩code } }}]这样子配置我这边是怎么都不会失效，须要把外面的normal那一层去掉，即：
series: [{ // ……其余配置项 testStyle: { color: // 随机色彩code }}]因为波及到的图表不多，所以遇到的问题也没有多少，这里做一下记录，不便当前查找。
参考资料
vue-echarts的demo
Vue我的项目应用echarts实现词云图