文章目录

- 前言：最重要的第一步：安装echarts
一、引入折线图
- 利用`ref`获取div容器
- 利用 `id` 获取容器
二、把折线图拐点设置成图片样式
三、给折线图设置背景颜色
- 1.单一背景色
- 2.渐变背景色

前言：最重要的第一步：安装echarts

npm install echarts --save

其他安装方式请到echarts官网查看

一、引入折线图

利用`ref`获取div容器

1.先准备一个容器

2.在mounted钩子函数中书写以下代码

import * as echarts from 'echarts';
mounted(){let psgTimeOption = {title: {left: 'center',text: '旅客时间分布',textStyle: {color: '#fff',fontSize: 35,fontWeight: 'normal'}},// 设置折线图的位置grid: {x: 50,y: 90,x2: 30,y2: 30},// 设置折线图的位置xAxis: {type: 'category',boundaryGap: false,axisLabel: {interval: 0,fontSize: 20},data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']},yAxis: {name: '人次',// y轴名称的位置nameTextStyle: {align: "right",fontSize: 20},type: 'value',min: 0,max: 100,// 只能设置偶数splitNumber: 6,axisLabel: {fontSize: 20}},series: [{data: [15, 23, 22, 21, 13, 17, 60, 22, 21, 13, 17, 60],type: 'line',// symbol: 'circle',     //设定为实心点symbolSize: 15,   //设定圆圈的大小}]}// 传递一个dom元素let psgTimeCharts = echarts.init(this.$refs.psgTime)//传入一个配置项psgTimeCharts.setOption(psgTimeOption)
}

3.部分说明
axisLabel 可以设置x、y轴刻度上文本的样式，如大小、颜色、字体样式;
boundaryGap 是两侧留白，决定着文字是否在刻度中间还是在刻度正下方；

利用 `id` 获取容器

二、把折线图拐点设置成图片样式

1.先引入图片

import chart_circle from '../../assets/images/section_right/chart_circle.png';

2.然后定义变量（如果在另一个文件定义这个变量，要记得使用export default 导出）

const chartCircle = 'image://' + chart_circle;

3.最后使用变量

 symbol: chartCircle

效果展示：

参考文章

三、给折线图设置背景颜色

1.单一背景色

markArea 里的 itemStyle 属性，如果需要分别设置颜色就将itemStyle属性写到markArea下对应data里

2.渐变背景色

（1）给data里所有选中区域设置背景颜色

效果如下

（2）分别给每一块区域设置背景颜色

代码如下：

series: [{name: 'Electricity',type: 'line',smooth: true,// prettier-ignoredata: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],markArea: {data: [[{itemStyle: {color: {type: 'linear',x: 1,//右y: 0,//下x2: 0,//左y2: 0,//上colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false}},name: 'Morning Peak',xAxis: '07:30'},{xAxis: '10:00'}],[{itemStyle: {color: {type: 'linear',x: 0,//右y: 1,//下x2: 0,//左y2: 0,//上colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'rgba(0, 0, 0, 0.8)' // 100% 处的颜色}],global: false // 缺省为 false}},name: 'Evening Peak',xAxis: '17:30'},{xAxis: '21:15'}]]}}]

echarts在线测试

点击文档==》配置项手册==》series==》itemStyle==》color
其中x,y,x2,y2分别代表右边、下边、左边、上边, x:0, y:1, x2:0, y2:0表示颜色从下边开始

四、补充内容
由于整个页面进行了zoom：0.5缩放，导致折线图点击事件出现问题。
只需要在折线图所在div书写zoom：2，并且把所有数据都缩小两倍（宽高、具体配置项等）

vue中如何使用echarts——以折线图为例相关推荐

使用 Echarts 实现折线图中线条添加、删除、编辑
使用 Echarts 实现折线图中线条添加.删除.编辑小帅小白,也能改变浪花的方向,公众号:51reboot运维开发介绍一下使用 Echarts 做数据统计分析,如何实现支持折线图的添加.删除. ...
php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子
1.首先引入echart.js 2.html页面,要有一个布局容器,用来显示图像,一定要设置宽和高 3.echarts折线图的使用 var myChart = echarts.init(documen ...
echarts动态折线图拉扯变形问题
echarts动态折线图拉扯变形问题在使用echarts折线图做动态数据展示时,发现一个bug 当折线图的一个数值较高点紧挨着一个数值为零的点,guyong时图形会被拉扯,应该是echart的bu ...
Echarts实现折线图Y轴不等距百分比（最终解决方案）
Echarts实现折线图Y轴不等距百分比(最终解决方案-上集) 出现背景解决思路总结附加出现背景最近公司有一个需求,主要是想展示近7日产品的一个良品率(百分率制).但是呢,基本上每天这个 ...
在vue中使用antV-G2展示基础面积图
介绍在vue中使用antV-G2展示基础面积图 G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性.使用 G2,你可以无需关注图表各种繁琐的实 ...
python使用matplotlib可视化折线图、在可视化图像中同时绘制多条折线图
python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图目录 python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图
[vue] 有在vue中使用过echarts吗？踩过哪些坑？如何解决的？
[vue] 有在vue中使用过echarts吗?踩过哪些坑?如何解决的? vue 没用过echarts react到是用过不过我想应该差不多 ,多注意dom的渲染时机和chart的实例化时机在相 ...
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
echarts画折线图和数据excel导出
最近一直使用echarts画折线图,在此做个记录最后样式代码 <!DOCTYPE html> <html style="height: 100%">&l ...

vue中如何使用echarts——以折线图为例

文章目录

前言：最重要的第一步：安装echarts

一、引入折线图

利用`ref`获取div容器

利用 `id` 获取容器

二、把折线图拐点设置成图片样式

三、给折线图设置背景颜色

1.单一背景色

2.渐变背景色

vue中如何使用echarts——以折线图为例相关推荐

最新文章

热门文章

vue中如何使用echarts——以折线图为例

文章目录

前言：最重要的第一步：安装echarts

一、引入折线图

利用ref获取div容器

利用 id 获取容器

二、把折线图拐点设置成图片样式

三、给折线图设置背景颜色

1.单一背景色

2.渐变背景色

vue中如何使用echarts——以折线图为例相关推荐

最新文章

热门文章

利用`ref`获取div容器

利用 `id` 获取容器