vue 项目 使用 echarts 折线图
先来张效果图
文章图片
安装echarts依赖
npm install echarts -save
在main.js中全局引入
【vue 项目 使用 echarts 折线图】import echarts from "echarts";
Vue.prototype.$echarts = echarts
在页面中使用
html 代码：
js 代码：
首先引入 echarts
import echarts from 'echarts'
然后在data中定义五个数组（可替换成后端返回的数据）：
xAxisData: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // x轴数据，可根据需求
yAxisData1: [120, 132, 101, 134, 90, 230, 210], // y轴数据1
yAxisData2: [220, 182, 191, 234, 290, 330, 310], // y轴数据2
yAxisData3: [150, 232, 201, 154, 190, 330, 410], // y轴数据3
yAxisData4: [320, 332, 301, 334, 390, 330, 320], // y轴数据4
yAxisData5: [820, 932, 901, 934, 1290, 1330, 1320], // y轴数据5
最终代码
推荐阅读
- 由浅入深理解AOP
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 2020-04-07vue中Axios的封装和API接口的管理
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件