1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列

一、echarts 折线图(折线统计图)

折线图在我们也是我们的数据可视化图表中最常用的一种图表之一，是用折线将各个数据点标志连接起来的图表，不仅可以表示数量的多少，而且可以反映同一事物在不同时间里的发展变化的情况以及变化趋势。

看着官网示例的这些花花绿绿的折线图，相信在日常的开发中，只要稍加配置调一下，已经可以满足9成的需求了。

二、echarts的下载、安装与使用

在上一篇的文章里，我们主要是学习如何快速上手Echarts的一些属性设置，我们演示的时候用的引入方式是一次性引入所有的资源。

如这样：

import * as echarts from 'echarts';

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

其实上面这样的引入方式在项目的开发中是不推荐的！！！

原因是上面的代码会引入所有 ECharts 中所有的图表和组件，有很多属性我们都用不上，会造成资源的浪费与占用。

但是假如你不想引入所有组件， ECharts 是提供了按需引入的接口来打包必须的组件。

后面的文章我们都会使用按需引入的接口的方式来进行开发。

下面正开始。

三、echarts的下载、按需引入

接下来就是要这个例子进行开发。

首先下载安装依赖：

1、运行命令：

npm install echarts --save
//or
yarn add echarts

2、按需引入项目(作者使用Vue项目)

这里需要注意的是4.x版本和5.x版本的引入方式有很大的不同

• 4.x版本的引入方式

  // 引入基本模板
  import echarts from “echarts/lib/echarts”;

  //引入环形图
  import “echarts/lib/chart/bar”;
  // 引入提示框组件、标题组件、工具箱组件。
  import “echarts/lib/component/tooltip”;
  import “echarts/lib/component/title”;
  import “echarts/lib/component/legend”;

• 5.x版本的引入方式
  我们的项目里使用的是最新的版本5.x。