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