echarts

1.echarts是什么？

使用 JavaScript 实现的开源可视化库，可以运行在pc和移动设备上

可高度个性化定制的数据可视化图表

2.vue中使用echarts

2.1使用npm引入echarts

npm install echarts --save

2.2引用

2.2.1全局的引用方式

//在vue项目中的main.js写入
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

//在echart1.vue文件中

<template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="main" style=" 600px;height:400px;"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    // let main = document.getElementById("main");
    // console.log(main);
  },
  mounted() {
    console.log("mounted");
    // let main = document.getElementById("main");
    // console.log(main);
    //要保证能获取到dom元素，所以需要在dom挂载在页面上的mounted生命周期
    //绘制
    this.draw();
  },
  methods: {
    draw() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>

2.2.2按需引用

2.2.1 首先在脚手架的src创建api/echarts.js

// 引入 echarts 主模块。
import echarts from 'echarts/lib/echarts'
// 引入柱状图。
import 'echarts/lib/chart/bar'
// 引入提示框组件、标题组件、工具箱组件。
import "echarts/lib/component/title"
export default echarts

2.2.2如果是多组件需要，在main.js引入，如果是一个组件应用，就在该组件中引入

//main.js
import echarts from "@/api/echarts.js"
Vue.prototype.$echarts = echarts
//.vue
import echarts from "@/api/echarts.js"
//然后直接使用
echarts.init()