vue使用echarts（数据可视化）

安装

npm install echarts --save

按需引入并在.vue文件中使用

<!--  -->
<template>
  <div class='echart'>
    <div>echarts</div>
    <div id="myEchart"></div>
  </div>
</template>

<script>
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
  name: 'echart',
  components: {

  },
  data() {
    return {
      params: {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
    };
  },
  mounted () {
    let myChart = echarts.init(document.getElementById('myEchart'));
    myChart.setOption(this.params)
  },
  //方法集合
  methods: {
    
  }
}
</script>
<style lang='scss' scoped>
  #myEchart{
    width: 500px;
    height: 400px;
  }
</style>

除了按需引入之外还有全局引入的方式（这是为了不用一个一个文件夹去找对应的eachrts文件来引入）但是这回消耗性能

main.js

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

vue文件中（由于参数太多就不写出来了）

<div id="EchartsAll"></div>

mounted () {
    //全部引入
    let myCharts = this.$echarts.init(document.getElementById('EchartsAll'))
    myCharts.setOption(this.params1)
  },

 面试中多次问到数据可视化，这里先入门一下后面在慢慢深入吧
下面是一些数据对应的含义

params1: {
color:['#1E88F5','#FF8367','#DDFA8A', '#8ACDF3','#FFD986','#FF98BC'],//设置颜色
        title: {//图标的标题
          text: "天气情况统计",
          subtext: "虚构数据",
          left: "center"
        },
        legend: {//显示图上都有哪些数据
          width: 220,
          bottom: 0,
          left: 0,
          data: ["西凉", "益州", "兖州", "荆州", "幽州",'北京'],
 formatter: function(name) {//设置每个数据的现实信息
                var index = 0;
                var clientlabels = ["西凉", "益州", "兖州", "荆州", "幽州",'北京'];
                var clientcounts = [735,634,510,535,1548,1135];
                var num = 0
                for (let i = 0;i < clientcounts.length;i++) {
                  num += clientcounts[i]
                }
                clientlabels.forEach(function(value,i){
                  if(value == name){
                    index = i;
                  }
                });
                return name + "  " + Math.floor(clientcounts[index]/num * 100) + '%';
              }
        },
        tooltip : {//设置鼠标经过对应的区域会提示区域的信息
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            center: ['50%', '50%'],//控制图标的位置
            hoverAnimation:false,//鼠标移动到上面没有动画
            label: {//提示对应区域的信息
              normal: {
                show: false,
                position: 'center'
              },
            },
            type: "pie",//图标的类型（折线图，饼图等等）
            data: [//饼图的数据
              { value: 1548,name: "幽州" },
              { value: 535, name: "荆州" },
              { value: 510, name: "兖州" },
              { value: 634, name: "益州" },
              { value: 735, name: "西凉" },
              { value: 1135,name: "北京" }
            ]
          }
        ]
      }