在Vue怎么使用Echarts创建图表

在后台管理系统中，我们经常会遇到图表，比如说：柱形图，饼状图，折线图，雷达图等等，而用来写图表插件有很多，我这里主要介绍Echarts在项目里怎么使用。
官网地址如下：Echarts图表官网
详细信息请阅览他们的官网文档和实例，各种图表都比较完善。

一.安装插件

方法一：npm安装Echarts

npm install echarts -S

方法二：cnpm安装Echarts

1.首先我们需要安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.然后

cnpm install echarts -S

二.引入Echarts
方法一：全局引入

打开main.js文件引入Echarts

import echarts from 'echarts'

然后将echart添加到vue的原型上，这样就可以全局使用了

Vue.prototype.$echarts = echarts

方法二：局部引入
全局引入会将所有的echarts图表打包，导致体积过大，所以我觉得最好还是按需要来局部引入，比如我们需要引入一个柱状图

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

这里require直接从 node_modules 中查找文件位置进行引入

三.创建图表
当你安装完插件和在页面里面引入图表之后，那么恭喜你可以创建图表了~

第一步：你首先得创造一个图表的容器，宽高必须是行内样式，单位必须是px

<template>
       <div id="myChart" :style="{width: '1000px', height: '600px'}"></div></template>

注意：这样会出现一个问题，因为由于必须固定好宽高，你缩小屏幕的时候，图表不会随之适应的缩小，刷新页面才能适应，解决方法的实现请接着往下看

第二步：绘制图表，这里我们要注意，echarts初始化应在钩子函数mounted()中，挂载之后调用

<script>
        export default {
   
             data() {
                       return {
   

                   }
              },             //钩子函数             mounted(){                   this.draw();
             },
             methods: {
   
                   draw(){
                          // 初始化echarts实例
                        let myChart = this.$echarts.init(document.getElementById('myChart'))                       // 绘制图表
                       var option = {
                               //此处占用篇幅过大，先省略等下会进行解释                       }                       //防止越界，重绘canvas
                       window.onresize = myChart.resize;
                       myChart.setOption(option);//设置option                   }
              }
         }</script>

解释：

第一点：省略处为绘制图表的代码，首先，你打开Echarts官网，找到实例，选取你项目里面需要用到的图表模板（样式差不多就行，下文会教你如何修改图表样式），点进去，然后你可以看到左侧的代码，把option = {}括号里面的内容放置到我上方省略的代码处，运行，你页面即可以看到你所需要的图表；

第二点：下方代码防止越界，重汇canvas处，即为可以解决掉屏幕缩小，图表不会随之适应的缩小的方法，原理为当浏览器发生resize事件的时候，让其触发echart的resize事件，重绘canvas

//防止越界，重绘canvaswindow.onresize = myChart.resize;
myChart.setOption(option);//设置option

四.修改样式

当你创建完图表之后，你会发现你的图表和UI给的样式差距太大，这样写肯定是不能过关的，所以你得修改图表样式，现在我从图表的左上角说到右下角，如何去更改图表样式，首先先上两张图表的差异图：

图一为Echarts未修改过的柱形图：

图二为修改样式之后的柱形图：

样式修改方法：

1.左上角图例处：

//图例legend: {
   
      data: ['降水量'],//与series的name对应
       left: '75%',//图例的离左边位置，可以用像素，可以用百分比，也可以用center，right等
       top: 12px,//图例离顶部的位置