文章目录
前言：最重要的第一步：安装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，并且把所有数据都缩小两倍（宽高、具体配置项等）
