vue - echarts的简单使用

vue中使用echarts 的简单介绍

点击进入 echarts官网

1，安装

npm install echarts --save

2，在main.js中引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts //挂载到原型上面 也可以选择不挂载 直接在页面上引

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

3，使用案例效果图

4，使用案例代码如下：

<template>
  <div>
    <h1>echarts可视化</h1>
    <hr />
    <div class="container">
      <div id="myEcharts"></div>
      <div id="myEchartsRight"></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
  created() {},
  // 页面挂载完成后调用
  mounted() {
    this.initEcharts();
    this.myEchartsRight();
  },

  methods: {
    
    // 左侧柱状图
    initEcharts() {

      // 1，挂载节点
      let myEcharts = this.$echarts.init(document.getElementById('myEcharts'));

      // 2，设置图表的属性
      let options = {
        title: {
          text: 'ECharts 示例',
        },
        tooltip: {
          trigger: 'item',
          formatter: 'hellow', //饼状图触碰后显示的文字
          //   position: ["25%", "0%"],
        },
        color: ['#fdc3bf'], //饼状图每块颜色
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      };

      // 3，使用上面的options属性 正式生成图表
      myEcharts.setOption(options);
    },

    // 右侧饼图
    myEchartsRight() {
      let myEcharts = this.$echarts.init(document.getElementById('myEchartsRight'));
      let options = {
        title: {
          text: '饼图',
          left: 'center',
          top: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: 'hellow', //饼状图触碰后显示的文字
          //   position: ["25%", "0%"],
        },
        // color: ["#fdc3bf"], //饼状图每块颜色
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            roseType: 'angle',
            data: [
              { value: 235, name: '视频广告' },
              { value: 274, name: '联盟广告' },
              { value: 310, name: '邮件营销' },
              { value: 335, name: '直接访问' },
              { value: 400, name: '搜索引擎' },
            ],
          },
        ],
        radius: ['40%', '70%'],
      };
      myEcharts.setOption(options);
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 90%;
  margin: 0 auto;
  border: 1px solid balck;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  #myEcharts {
    width: 400px;
    height: 400px;
    background-color: aquamarine;
    margin-right: 30px;
  }
  #myEchartsRight {
    width: 400px;
    height: 400px;
    background-color: bisque;
  }
}
</style>