Vue-Echarts的使用：在vue项目中使用echarts

前言

刚工作半年，第一次接到绘制饼图、柱形图的需求，对未知的事物多少都会有恐惧。于是请教大神，大神直接甩了vue-echarts的文档和echarts的文档给我，说一看就会，然而……一上来还是有点懵，有必要记录一下。

相关链接

• vue-echarts github文档
• echarts官方文档

思路

• 为什么要用vue-echarts?直接用echarts不好吗？

  根据echarts的官方文档，画一个图标要先新建一个容器，然后再JS中通过getElementById获取这个容器，这是最原始的JS和html交互，不符合经常使用vue开发的同学的使用习惯。于是vue-echarts把echarts获取元素的代码封装了一下，变成一个组件，平均每个图可以让我们少写十行左右代码。vue-echarts最主要的就是完成这个使命，剩下的图表配置项我们要自行学会看echarts的文档。

实现步骤

1、了解原生Echarts

首先，我们先看一下原生Echarts是如何创建容器的 --> 5 分钟上手 ECharts

2、引入vue-echarts, echarts

npm install echarts vue-echarts

3、在.vue文件中调用vue-echarts

<template>
    <v-chart :options="polar"/>
</template>

<style>
/**
 * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
 * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
 */
.echarts {
  width: 100%;
  height: 100%;
}
</style>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'       //绘制不同的图表要引入不同的chart和component
import 'echarts/lib/component/polar'

export default {
  components: {
    'v-chart': ECharts
  },
  data () {
    return {
      polar: {
        // 指定图表的配置项和数据
      }
    }
  }
}
</script>

4、学习Echarts的基础概念

接下来，我们需要对Echarts的基础概念有一个大概的印象 --> ECharts 基础概念概览

5、模仿实例

根据Echarts官方给的实例，找到自己想做的类似的图表，熟悉基础概念 --> 官方实例

如下图所示，侧边栏可以选择大类，这里有最常用的饼图、柱状图等，点击效果图可以进入代码页。

6、自定义配置

如果按上面的步骤一步步来，到这一步，我们心里都有个大致的谱了。接下来，我们需要根据Echarts的配置项来自定义实现，UI设计稿 --> 配置项

看到这么多配置项，是不是又晕了？这个tooltip是显示在哪的，这个grid又是干嘛用的？这时，我们再回来看一下基础概念的图：

我又可以了。

7、一点一点美化

刚开始接触Echarts，肯定会有很多奇奇怪怪的问题，怎么这个图这么不听话，溢出界面了？怎么这些数据堆在一起？好难看哦。这时没有捷径，我们只能慢慢摸索慢慢调试，耐心一点，很快就可以得到好看的图啦~

下面列举一个我遇到的比较难实现的设计稿：

这里有两个难点：

1. 这里的data选项。每一个value对应两种不同的解释，既是威胁人数>1000人,也是特大型。
2. 同一条数据上下两行的背景色和字体颜色互换了。

一开始拿到这个图，我的内心OS：好看是好看，但是这个真的可以实现吗？第一次发版时我只是把数据丑丑地放在那，反正也不影响主要功能。后来有一天我没有需求，看着Echarts的官方实例，突然有了灵感。

这里主要用到两个配置：

1. series-pie.label.formatter

2. series-pie.label.rich

pieOption: {
        grid: {
          left: 'center',
          top: 40,
          containLabel: true
        },
        color: ['#8676F8', '#99CDFD', '#3FE8BD', '#FA9DA6'],
        series: [
          {
            type: 'pie',
            radius: '48%',
            // radius: [20, 70],
            data: [
              { name: '威胁人数>1000人'},
              { name: '威胁人数<10人'},
              { name: '威胁人数>10人'},
              { name: '威胁人数>100人'},
            ],
            label: {
              lineHeight: 15,
              formatter: function(params) {
                var type
                var style
                switch(params.name) {
                  case '威胁人数>1000人': 
                    type='特大型';
                    style='xl';
                    break;
                  case '威胁人数>100人':
                    type = '大型';
                    style='l';
                    break;
                  case '威胁人数>10人':
                    type = '中型';
                    style='m';
                    break;
                  case '威胁人数<10人':
                    type = '小型';
                    style='s'
                    break;
                }
                return params.name + '\n' + '{' + style + '|' + type + ': ' + params.value + '处}'
              },
              rich: {
                xl: {
                  color: '#FFFFFF',
                  backgroundColor: '#8676F8',
                  padding: [2, 4],
                  borderRadius: 2
                },
                l: {
                  color: '#FFFFFF',
                  backgroundColor: '#FA9DA6',
                  padding: [2, 4],
                  borderRadius: 2
                },
                m: {
                  color: '#FFFFFF',
                  backgroundColor: '#3FE8BD',
                  padding: [2, 4],
                  borderRadius: 2
                },
                s: {
                  color: '#FFFFFF',
                  backgroundColor: '#99CDFD',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            }
          }
        ]
      },

当当当~最终实现样式

文章到这里就结束了。前端小白菜，内容也不是特别深入，如果对你有帮助，欢迎点赞、收藏，谢谢~