echarts折线图模板-Vue+Echarts 实现自定义折线图组件

我们经常使用Echarts制作各种图表,那么如何运用Echarts制作标准折线图呢?下面我给大家演示一下。

01

首先打开Sublime Text软件,新建一个HTML文档,并在文档中添加如下图所示的HTML结构

02

接下来运用scripts标签在HTML中引入echarts的库文件,如下图所示

03

然后我们在body标签中创建一个div区域用来存放折线图,如下图所示,注意给div设置高度

04

接下来我们通过echarts的init方法对刚才创建的div区域进行初始化,如下图所示

05

然后我们设置折线图的参数,包括X,Y坐标轴数据,折线图标题等信息,如下图所示

06

接下来在series参数中设置折线图所需要的数据,如下图所示,一条折线配置一个大括号

07

参数和数据设置完毕以后我们调用echarts的setOption方法将内容都填充进折线图展示区域,如下图所示

08

最后我们运行HTML文件,就可以看到如下图所示的标准折线图了,点击顶部的折线标题可以隐藏或者显示折线

网上Vue结合Echarts使用的例子少之又少,而且数据都写好在组件内且不可复用

本文基于 高仿饿了么外卖App ,在商家页面添加一个简易的可交互的平滑折线图

Chrome调试模拟手机端操作效果:

</br>

我将拆分为两个部分,标题和三个选择框写在当前页面中,将配置折线图的样式都写在父组件里,折线图则抽象化为可复用的组件。

</br>

模拟一份JSON格式的 折线图xy坐标轴数据 chartData ,其中分了日、周、月这三组数据。

** :**

</br>

在 webpack 的 中读取模拟好的 chartData 数据,然后新增个接口apiRoutes,当服务端收到请求以后,返回给客户端 chartData

** :**

</br>

向服务器请求并获取 chartData

:

</br>

中写好标题和三个选择框的样式

props 接收从 传来的xy坐标轴数据 chartData

传入 将要接收的数据,impData 为 chartData 中的一组数据,setData 为自定义折线图样式的数据。

select(type) 方法是点击选择框高亮,并把 impData 赋值为 chartData 中对应的一组数据

** :**

</br>

组件中

prop 接收父组件 的传来的 impChartData 和 setChartData

watch 观察 impChartData 数据的变化,因为父组件点击选择框会改变传入的数据,这里相应的改变数据,并渲染新的折线图

drawLine(xData, yData, xAxisColor, lineColor, grid) 是绘制折线图样式的主体,我提取出了五个属性值作为参数,

分别是x坐标轴数据、y坐标轴数据、x坐标轴指示器的颜色、折线线条的颜色、直角坐标系内绘图网格,

分别获取自 、 、 、 、

Echarts的 配置项 很多,如果想自定义更加个性化的样式,比如多条折线、两个x轴坐标,都可以设置为参数。

GitHub 上已经有达人做了几张图的基本模板 v-charts ,很方便就是可配置项比较少。

:

</br>

参考文档:

Echarts 配置项

效果图如下:

完成步骤:

1.创建dom容器,并设置宽高,以及ref,数据从接口提前获取好

2.创建echarts实例,并在mounted里调用

3.绘制图表

4.setOption一下

(initOption);