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的文档。

实现步骤

一、了解原生Echarts

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

二、引入vue-echarts, echarts

npm install echarts vue-echarts

三、在.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>

四、学习Echarts的基础概念

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

五、模仿实例

根据Echarts官方给的实例，找到本身想作的相似的图表，熟悉基础概念 --> 官方实例

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

六、自定义配置

若是按上面的步骤一步步来，到这一步，咱们内心都有个大体的谱了。接下来，咱们须要根据Echarts的配置项来自定义实现，UI设计稿 --> 配置项

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

我又能够了。

七、一点一点美化

刚开始接触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
                }
              }
            }
          }
        ]
      },

当当当~最终实现样式

文章到这里就结束啦~前端小白菜，可能写的内容也不深，请大神们多多指教鸭。