vue中使用echars

（1）下载echarts

你可以通过以下几种方式获取 ECharts。

1. 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。

2. 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

3. 通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”

4. cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

本文中使用的 npm 获取 echarts ：npm install echarts --save
（2）引入echarts

i）按需引入

如果项目中只用到小部分echarts的组件，建议使用按需引入，若生成图表的地方比较多，可以在main.js文件中引入，如下图，可以按需引入的模块列表见 https://github.com/ecomfe/echarts/blob/master/index.js。

//引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入饼图，柱状图,折线图等组件
require("echarts/lib/chart/pie");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和title组件，图例
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
Vue.prototype.$echarts = echarts;

ii）全局引入

在main.js中配置。全局引入缺点：如果是完整的引入Echarts，会额外的引入其他无用的配置文件，造成应用文件体积过大，资源加载耗时过长，影响用户体验。

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

（3）vue文件中使用echarts

i）将echarts的样式设置等基本属性封装成js文件，本文中封装了基础的折线图和饼状图，其中一些具体属性可前往echarts官网https://www.echartsjs.com/option.html#title查看。

const lineEcharts = (date, data) => {
  return {
    xAxis: {
      type: "category",
      data: date
    },
    yAxis: {
      type: "value",
      min: 0,
      max: 100
    },
    series: [
      {
        data: data,
        type: "line",
        itemStyle: {
          normal: {
            color: "#488cfb",
            label: {
              show: true,
              position: "top",
              formatter: "{c}%"
            }
          }
        }
      }
    ]
  };
};

const pieEcharts = (text, data) => {
  return {
    title: {
      text: text,
      x: "right",
      y: "bottom",
      textStyle: {
        fontSize: "14",
        fontWeight: "bold"
      }
    },
    color: ["#5ba8fc", "#f1cf55", "#f46a6a"],
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c}"
    },
    series: [
      {
        type: "pie",
        radius: "40%",
        center: ["50%", "50%"],
        data: data,
        labelLine: {
          normal: {
            length: 3
          }
        },
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)"
          }
        }
      }
    ]
  };
};

export { lineEcharts, pieEcharts };

ii) vue文件中调用

首先引入你所需要的组件

import { lineEcharts } from "@/assets/js/echarts";

本文介绍两种生成echarts图表的方式：1.用vue的ref生成，2.用class类生成

1.ref循环生成

      <div class="page_content">
            <div class="data-container">
                <div class="data-box" v-for="(item,index) in indexData"
                     :key="index">
                    <div class="data-header">
                        <p class="title">{{item.name}}（{{(item.finished_count /item.total_count*100).toFixed(1)}}%）</p>
                        <p class="time"
                           :style="{color: item.deadline < new Date().getTime()/1000?'#f56c6c':''}">{{$utils.formatTime(item.start_time)}} 至
                            {{$utils.formatTime(item.deadline)}}</p>
                    </div>
                    <div class="data-content" :ref="'task'+index"></div>
                </div>
            </div>
        </div>

代码中生成折线图的容器：

<div class="data-content" :ref="'task'+index"></div>

 生成折线图实例js：

          this.indexData.forEach((item, index) => {
            // 初始化图表实例
            item.chartData = this.$echarts.init(this.$refs["task" + index][0]);
            // 处理传入数据
            let date = item.daily_record.map(val => {
              return Number(((val.count / item.total_count) * 100).toFixed(1));
            });
            let data = item.daily_record.map(val => {
              return [
                val.date * 1000,
                Number(((val.count / item.total_count) * 100).toFixed(1))
              ];
            });
            // 使用js中的配置项和数据显示图表。
            const option = lineEcharts(date, data);
            item.chartData.setOption(option);
         });

2.用class类生成

                <div class="chart-box" v-for="(item, index) in chartData"
                     :key="index">
                      <div class="chart-box_content">
                        <div class="content_chart"></div>
                    </div>
                </div>

代码中生成饼状图的容器：

<div class="content_chart"></div>

 生成饼状图实例js：

          // 获取所有包含该class的dom结构
          let eleClass = document.getElementsByClassName("content_chart");
          this.chartData.forEach((item, index) => {
            let data = [];
            // 初始化饼状图实例
            item.chartData = this.$echarts.init(eleClass[index]);
            if (item.role === 3) {
              data[0] = { value: item.score.pass_count, name: "通过数" };
              data[1] = { value: item.score.rejected_count, name: "被退回数" };
              data[2] = { value: item.score.corrected_count, name: "被纠正数" };
            }
            if (item.role === 2) {
              data[0] = { value: item.score.reject_count, name: "退回数" };
              data[1] = { value: item.score.correct_count, name: "纠正数" };
            }
            // 使用js中的配置项和数据显示图表。
            const option = pieEcharts(item.task_name, data);
            item.chartData.setOption(option);
          });