vue中使用echarts（基础）

安装echarts项目依赖

---

npm install echarts --save//或者npm install echarts -S

使用国内淘宝镜像的则使用

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装echarts

cnpm install echarts -S

全局引入完毕后需要在src目录下找到main.js，在 main.js 中全局引入 echarts

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

页面创建图表

---

在vue组件中创建图表，定义一个容器，必须有宽高，我们用id为main的容器

<template>
  <div id="app">
    <div id="main" style="width: 800px;height:600px;"></div>
  </div>
</template>
<script>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      letoption = {
          title : {
              text: '某站点用户访问来源',
              subtext: '纯属虚构',
              x:'center'
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              left: 'left',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: {
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

到此图表该渲染出来了吧