欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在Vue中使用echarts,简单使用,组件化使用分析

程序员文章站 2022-06-28 18:21:48
在Vue中使用echarts安装版本依赖使用使用 -(全局引入)使用-(按需引入)在项目中不可避免的需要对数据进行可视化处理,也就是用图表展示,就把之前常用的echarts拿来分析一下,先看下效果好了,下面进入主题安装npm install echarts -S版本依赖"vue": "^2.5.2","echarts": "^4.8.0",不写版本依赖的都是耍流氓(版本不对导致出错的案例罄竹难书呀)使用使用 -(全局引入)在main.js中// 引入echartsimpor...

在项目中不可避免的需要对数据进行可视化处理,也就是用图表展示,就把之前常用的echarts拿来分析一下,先看下效果
在Vue中使用echarts,简单使用,组件化使用分析
好了,下面进入主题

安装

npm install echarts -S

版本依赖

"vue": "^2.5.2",
"echarts": "^4.8.0",

不写版本依赖的都是耍流氓(版本不对导致出错的案例罄竹难书呀)
在Vue中使用echarts,简单使用,组件化使用分析

使用

这里展示了3中使用方法,循序渐进,方便大家学习

使用 -(全局引入)

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在页面中, 比如echart.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
export default {
  data () {
    return {}
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中


使用-(按需引入)

由于全局引入会将所有的echarts图表打包,导致体积过大
在echarts.vue文件中

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

注意:使用 require 而不是 import

完整例子-大伙可以直接复制拿走使用

<template>
  <div class="testpage">
    <div class="pageCon">
      <!-- 实验成功 -->
      <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
    </div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {};
  },
  components: { },
  mounted() {
    this.drawLine();
  },
  created() {},
  methods: {
    drawLine() {
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
};
</script>
<style ></style>

使用-(组件化)

提到vue组件化是重要的一点,可以复用,方便维护。。。
那接下来我就简单的将他封装成一个简单的组件
业务场景:在详情页中用饼状图展示总费用的分布

效果图
在Vue中使用echarts,简单使用,组件化使用分析
我已精简代码,大家可将axios获取数据那一块忽略掉,直接看数据
1. 创建echarts.vue组件

<template>
  <div class="echartsWrap">
    <div id="myChart" class="myChart"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "echerts",
  props: {
    datas: {
      style: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.drawLine();
  },
  created() {},
  methods: {
    drawLine() {
      console.log("this.datas: ", this.datas);
      // 检查是否有数据
      if (!this.datas) {
        return;
      }
      // 基于准备好的dom,初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { x: "center" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datas,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="stylus">
.myChart{
  width: 100%;
  min-height: 220px;
}
</style>

2.页面中使用

 <div v-if="echartsData">
    <echarts :datas="echartsData"></echarts>
  </div>
import Echarts from "@/components/echarts/echarts";
export default {
  name: "goodDetail",
  data() {
    return {
      echartsData: [],
    };
  },
  components: {
    appHead,
    Echarts
  },
  mounted() {
    this.getData();
  },
  methods: {
  	// 获取数据 - 
    getData() {
      let params = {
        code: this.$route.query.id
      };
      this.$api.goods
        .goodsDetail(params)
        .then(res => {
          // 处理echarts的数据
          this.handleChartsData(this.gdData.goods_info);
        })
        .catch(error => {
          console.log("error: ", error);
          this.myloading = false;
        });
    },
    // 处理echarts的数据
    handleChartsData(datas) {
      console.log("data: ", datas);
      this.echartsData = [
        {
          value: datas.price,
          name: "网店售价"
        },
        {
          value: datas.consumer_bond,
          name: "消保金"
        },
        {
          value: datas.skill_price,
          name: "技术年费"
        },
        {
          value: datas.poundage,
          name: "居间费"
        }
      ];
      console.log('处理后的echarts数据: ', this.echartsData);
    }
  }
};

到这里,对echart的简单使用,组件化封装分析完毕,有问题的小伙伴可以随时问我哈

最后如果帮了你的大忙的话,请小伙伴们点个赞或打赏个几毛钱。在Vue中使用echarts,简单使用,组件化使用分析

在Vue中使用echarts,简单使用,组件化使用分析

本文地址:https://blog.csdn.net/u012570307/article/details/107529190