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,让咱们一起致力走向巅峰!
发表回复