关于vue.js:vueecharts封装一

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