共计 5410 个字符，预计需要花费 14 分钟才能阅读完成。
vue+echarts 封装一
1. 开发环境 vue+echarts+node.js
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会应用到 echarts, 联合 vue 我的项目, 我做了一个封装! 整体代码如下:
4. 在 template 中增加如下代码:
<div id="main" style="width: 100%; height: 400px"></div>
<div id="zhe" style="width: 100%; height: 400px"></div>
<button @click="qie"> 切换数据 </button>5. 在 return 中增加如下代码:
// 承受 echarts 的值
Chenoption: undefined,
Chenoptionzhe: undefined,
chenechartsres: undefined,6. 在 methods 中增加申请数据代码:
// 页面已加载就申请数据
chenget() {feng().then((res) => {console.log(res);
this.chenechartsres = res.data;
console.log(this.chenechartsres);
this.tt(this.chenechartsres);
});
},7. 在 methods 中增加画图再次封装办法:
tt(a) {console.log(a);
this.Chenoption = {
title: {text: "ECharts 入门示例 1",},
tooltip: {trigger: 'axis'},
legend: {data: ["销量"],
},
xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "褂子", "短裤"],
},
yAxis: {
min: a.echartsObj.echartsZheMin,
max: a.echartsObj.echartsZheMax,
},
series: [
{
name: "销量",
type: "bar",
// data: [5, 20, 36, 10, 10, 20],
data: a.echartsObj.echartsZheArr,
},
],
};
// console.log(this.Chenoption.yAxis.min);
// this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
this.Chenoptionzhe = {
title: {text: "ECharts 入门示例 2",},
tooltip: {trigger: "axis",},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""],
},
yAxis: {
type: "value",
min: a.echartsObj.echartsZhuMin,
max: a.echartsObj.echartsZhuMax,
interval:(a.echartsObj.echartsZhuMin+a.echartsObj.echartsZhuMax)/2
},
series: [
{// data: [820, 932, 901, 934, 1290, 1330, 1320],
data: a.echartsObj.echartsZhuArr,
type: "line",
},
],
};
this.drawChart("main", this.Chenoption);
this.drawChart("zhe", this.Chenoptionzhe);
},8. 在 methods 增加画图封装, 代码如下:
// 对 echarts 办法的封装
drawChart(drawChartId, Chenoption) {this.myChart = echarts.init(document.getElementById(drawChartId));
let option = Chenoption;
// 指定图表的配置项和数据
this.myChart.setOption(option);
// window.onresize = function() {// myChart.resize();
// };
},9. 点击切换申请不同的数据, 代码如下:
// 点击切换数据按钮, 切换对应的数据
qie(){console.log("999");
echartsqie().then((res) => {console.log(res);
this.chenechartsres = res.data;
console.log(this.chenechartsres);
this.tt(this.chenechartsres);
});
}10. 整体代码如下:
<template>
<div class="home">
<p> 我是 home 页面 </p>
<div id="main" style="width: 100%; height: 400px"></div>
<div id="zhe" style="width: 100%; height: 400px"></div>
<button @click="qie"> 切换数据 </button>
</div>
</template>
<script>
import echarts from "echarts";
import {feng,echartsqie} from "@/api/chenecharts";
export default {
name: "home",
components: {},
data() {
return {
// 承受 echarts 的值
Chenoption: undefined,
Chenoptionzhe: undefined,
chenechartsres: undefined,
};
},
computed: {// ...mapState(['chen']);
},
mounted() {this.chenget();
},
methods: {
// 页面已加载就申请数据
chenget() {feng().then((res) => {console.log(res);
this.chenechartsres = res.data;
console.log(this.chenechartsres);
this.tt(this.chenechartsres);
});
},
tt(a) {console.log(a);
this.Chenoption = {
title: {text: "ECharts 入门示例 1",},
tooltip: {trigger: 'axis'},
legend: {data: ["销量"],
},
xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "褂子", "短裤"],
},
yAxis: {
min: a.echartsObj.echartsZheMin,
max: a.echartsObj.echartsZheMax,
},
series: [
{
name: "销量",
type: "bar",
// data: [5, 20, 36, 10, 10, 20],
data: a.echartsObj.echartsZheArr,
},
],
};
// console.log(this.Chenoption.yAxis.min);
// this.Chenoption.yAxis.interval=(this.Chenoption.yAxis.min+this.Chenoption.yAxis.max)/2;
this.Chenoptionzhe = {
title: {text: "ECharts 入门示例 2",},
tooltip: {trigger: "axis",},
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", ""],
},
yAxis: {
type: "value",
min: a.echartsObj.echartsZhuMin,
max: a.echartsObj.echartsZhuMax,
interval:(a.echartsObj.echartsZhuMin+a.echartsObj.echartsZhuMax)/2
},
series: [
{// data: [820, 932, 901, 934, 1290, 1330, 1320],
data: a.echartsObj.echartsZhuArr,
type: "line",
},
],
};
this.drawChart("main", this.Chenoption);
this.drawChart("zhe", this.Chenoptionzhe);
},
// 对 echarts 办法的封装
drawChart(drawChartId, Chenoption) {this.myChart = echarts.init(document.getElementById(drawChartId));
let option = Chenoption;
// 指定图表的配置项和数据
this.myChart.setOption(option);
// window.onresize = function() {// myChart.resize();
// };
},
// 点击切换数据按钮, 切换对应的数据
qie(){console.log("999");
echartsqie().then((res) => {console.log(res);
this.chenechartsres = res.data;
console.log(this.chenechartsres);
this.tt(this.chenechartsres);
});
}
},
};
</script>
11.node.js 接口, 页面已加载就申请 echarts 接口, 代码如下:
var express = require('express');
var mysql = require("mysql");
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {// res.render('index', { title: 'Express'});
console.log(req.body);
var chenfe = {
chenfedata: [{
name: '我是陈',
code: '200'
}]
}
res.json(chenfe);
});
router.post("/", function (req, res, next) {console.log(req.body);
console.log("+++++++++++");
var data={
code:200,
chenmeg:"申请胜利",
chenfengdata:{chenfengname:"你好, 我是尘封"},
echartsObj:{echartsZheArr:[10,30,50,80,90,132,150,200],
echartsZheMin:10,
echartsZheMAx:300,
echartsZhuArr:[80,100,22,99,120,152,190,300],
echartsZhuMin:0,
echartsZhuMax:300,
}
};
res.json(data);
})
module.exports = router;
12. 点击切换, 申请 echartsqie 接口, 代码如下:
var express = require('express');
var mysql = require("mysql");
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {// res.render('index', { title: 'Express'});
console.log(req.body);
var chenfe = {
chenfedata: [{
name: '我是陈',
code: '200'
}]
}
res.json(chenfe);
});
router.post("/", function (req, res, next) {console.log(req.body);
console.log("+++++++++++");
var data={
code:200,
chenmeg:"申请胜利",
chenfengdata:{chenfengname:"你好, 我是 echarts 切换数据"},
echartsObj:{echartsZheArr:[30,60,100,200,180,122,130,500],
echartsZheMin:90,
echartsZheMAx:400,
echartsZhuArr:[160,200,92,19,190,352,290,30],
echartsZhuMin:22,
echartsZhuMax:360,
}
};
res.json(data);
})
module.exports = router;
13. 页面已加载成果如下：
14. 点击切换按钮, 成果如下:
15. 本期的教程到了这里就完结啦, 是不是很 nice, 让咱们一起致力走向巅峰!
正文完
