项目开发之Echarts的使用（数据可视化）

一、安装

只需要两步：

1.下载echarts

在下载echarts时，很多人可能会遇到安装不成功或者报错的问题，解决办法可以通过重装或者是装之前的版本来解决。

npm install echarts --save
npm install echarts@4.8.0 --save
//卸载命令
npm uninstall echarts

2.main.js中引入并注册

import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

若是引入后报错，可尝试以下引入方式：

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

到这里，echarts的安装就OK了

二、使用

已经将echarts安装引入后，接下来需要在项目中使用：

1. 为echarts准备一个具有宽高的div容器（简单来说就是存放图表的一个占位）

<div id="myChart" :style="{ width: '100%', height: '100%' }"></div>

2. 获取定义id并通过echarts.init()方法初始化echarts实例

 var myChart = this.$echarts.init(document.getElementById('myChart'));

3. 根据个人需求调整图表的配置项和数据

let option = {
    ......
}

4. 通过setOption()方法生成图表

myChart.setOption(option)

三、实例

1.单个柱状图

<template>
  <!-- 图表的容器，一定要有宽高 -->
  <div class="chartBox">
    <div id="pillarsChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>
<script>
import { getJxbyl } from "@api/screen"; //引入的接口文件
export default {
  data() {
    return {};
  },
  mounted() {
    this.getJxbyl(); //接口方法
  },
  methods: {
    //接口方法
    getJxbyl() {
      //请求接口
      getJxbyl({}).then((res) => {
        if (res.code == "10000") {
          this.pillarsEcharts(res.data.xData, res.data.yData); //调用图表方法并将参数（数据）传递过去
        }
      });
    },
    //图表方法
    pillarsEcharts(x, y) {
      //获取id并初始化图表
      var myChart = this.$echarts.init(document.getElementById("pillarsChart"));
      //配置项
      let option = {
        tooltip: {
    	  //鼠标触摸显示值
    	  trigger: "axis",
   		  axisPointer: {
      	     type: 'shadow'
   		   }
  		},
        xAxis: {
          //x轴设置
          type: "category", //类型
          data: x, //x即接口方法传递过来的参数也是x轴的数据（x等同于res.data.xData）
        },
        yAxis: {
          //y轴设置
          type: "value", //类型
        },
        series: [
          {
            data: y, //y即接口方法传递过来的参数也是y轴的数据（x等同于res.data.yData）
            type: "bar", //类型
          },
        ],
      };
      myChart.setOption(option); //通过setOption()方法生成图表
      window.addEventListener("resize", function () {
        myChart.resize(); //图表自适应的一个方法
      });
    },
  },
};
</script>
<style scoped>
	.chartBox {
	  width: 50%;
	  height: 50vh;
	}
</style>

2.基础折线图

<template>
  <!-- 图表的容器，一定要有宽高 -->
  <div class="chartBox">
    <div id="brokenChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import { obd } from "@api/screen"; //引入接口文件
export default {
  data() {
    return {};
  },
  mounted() {
    this.obd(); //接口方法
  },
  methods: {
    //请求接口
    obd() {
      obd({}).then((res) => {
        if (res.code == "10000") {
          this.brokenChart(res.data.xData, res.data.yData); //调用图表方法并将参数（数据）传递过去
        }
      });
    },
    //图表方法
    brokenChart(x, y) {
      //获取id并初始化图表
      var myChart = this.$echarts.init(document.getElementById("brokenChart"));
      //配置项
      let option = {
        tooltip: {
          //鼠标触摸显示值
          trigger: "axis",
        },
        xAxis: {
          type: "category", //类型
          data: x, //x即接口方法传递过来的参数也是x轴的数据（x等同于res.data.xData）
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: y, //y即接口方法传递过来的参数也是y轴的数据（x等同于res.data.xData）
            type: "line", //类型
          },
        ],
      };
      myChart.setOption(option); //通过setOption()方法生成图表
      window.addEventListener("resize", function () {
        myChart.resize(); //图表自适应的一个方法
      });
    },
  },
};
</script>
<style scoped>
	.chartBox {
	  width: 30%;
	  height: 50vh;
	}
</style>

3.基础饼状图

<template>
  <!-- 图表的容器，一定要有宽高 -->
  <div class="chartBox">
    <div id="cakeChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
import { getMeachDistribution } from "@api/screen"; //引入的接口文件
export default {
  data() {
    return {};
  },
  mounted() {
    this.getMeachDistribution(); //接口方法
  },
  methods: {
    //接口方法
    getMeachDistribution() {
      //请求接口
      getMeachDistribution({}).then((res) => {
        if (res.code == "10000") {
          this.cakeEcharts(res.data); //调用图表方法并将参数（数据）传递过去
        }
      });
    },
    //图表方法
    cakeEcharts(data) {
      //获取id并初始化图表
      var myChart = this.$echarts.init(document.getElementById("cakeChart")); //调用图表方法并将参数（数据）传递过去
      let option = {
        tooltip: {
          //鼠标触摸显示值
          trigger: "item",
        },
        series: [
          {
            name: "月份",
            type: "pie",
            radius: "50%",
            data: data, //data即接口方法传递过来的参数也是图表的数据（data等同于res.data）
          },
        ],
      };
      myChart.setOption(option); //通过setOption()方法生成图表
      window.addEventListener("resize", function () {
        myChart.resize(); //图表自适应的一个方法
      });
    },
  },
};
</script>
<style scoped>
	.chartBox {
	  width: 30%;
	  height: 50vh;
	}
</style>