在jQuery里面，实现一个折线图，【前端统计图】echarts实现单条折线图
https://www.jianshu.com/p/0354a4f8c563
1:在项目里面安装折线图
cnpm install echarts --s
2：在需要用图表的地方引入
import echarts from 'echarts'
3：打开echarts.vue
继续写代码，代码如下：
<template> <div> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div> </div> </template> <script> import echarts from 'echarts' export default { name: '', data() { return { charts: '', /* opinion: ["1", "3", "3", "4", "5"],*/ opinionData: ["3", "2", "4", "4", "5"] } }, methods: { drawLine(id) { this.charts = echarts.init(document.getElementById(id)) this.charts.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['近七日收益'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["1","2","3","4","5"] }, yAxis: { type: 'value' }, series: [{ name: '近七日收益', type: 'line', stack: '总量', data: this.opinionData }] }) } }, //调用 mounted() { this.$nextTick(function() { this.drawLine('main') }) } } </script>
4:这个时候，可以看到，加载出的折线图了，后面可以继续进行完善。
成功显示折线图
5：以上的数据是通过变量构造的
实际项目里面
需要用到axios请求后端接口
那么，我们今天就把接口写在mock里面吧
首先在mock里面新建一个echarts.json
echarts.json文件
{ "categories": [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12" ], "data": [ 3, 2, 4, 4, 5 ] }
6：在build目录下找到webpack.dev.conf.js文件，编写以下代码
// mock code const express = require('express') const app = express() const test = require('../mock/test.json') const echarts = require('../mock/echarts.json') const routes = express.Router() app.use('/api', routes) // 如果是post请求，那么将get改为post即可 devServer: { ... before(app){ app.get('/api/test', (req, res) => { res.json(test) }), app.get('/api/echarts', (req, res) => { res.json(echarts) }) }
7:浏览器输入http://localhost:8080/api/echarts
成功看到模拟数据
8:echarts.vue里面的代码。
一开始写代码的时候，赋值成功，数据也能打印在控制台上，但是不知道为什么就是绘制不出来折线图，我表示很无奈，于是问了一下张小丽，她让我把 this.drawLine('main')方法直接放在赋值之后，一开始我是放在 mounted()里面进行调用的，更换了位置之后，再次打开浏览器，折线图已经绘制在浏览器里面了，哈哈，有大神闺蜜带飞的感觉可真好。
<template> <div> <!--为echarts准备一个具备大小的容器dom--> <div id="main" style="width: 600px;height: 400px;"></div> </div> </template> <script> import echarts from 'echarts' import axios from "axios"; export default { name: '', data() { return { charts: '', /* opinionData: ["3", "2", "4", "4", "5"]*/ opinionData: [] } }, methods: { getData() { axios.get('http://localhost:8080/api/echarts').then(response => { console.log(response.data); this.opinionData =response.data.data; this.drawLine('main') }, response => { console.log("error"); }); }, drawLine(id) { this.charts = echarts.init(document.getElementById(id)) this.charts.setOption({ tooltip: { trigger: 'axis' }, legend: { data: ['近七日收益'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ["1","2","3","4","5"] }, yAxis: { type: 'value' }, series: [{ name: '近七日收益', type: 'line', stack: '总量', data: this.opinionData }] }) }, }, //调用 mounted() { this.getData(); } } </script>
9：再次查看，从json里面请求过来的数据就这样展示在界面了。
