vue+echarts基本图形使用

1.安装:cnpm install echarts --save
2.页面引入:import echarts from “echarts”;
3.基本格式:

<template>
  <div>
    <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "home",
  data() {
    return {
      charts: "",
      opinion: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      opinionData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" }
      ]
    };
  },
  methods: {
    drawPie(id) {
      this.charts = echarts.init(document.getElementById("main"));
      this.charts.setOption({
        
        //这里完整的复制粘贴 echartsAPI   就行

      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie();
    });
  }
};
</script>>

完整代码如下

<template>
  <div>
    <div id="main" style="width: 600px;height: 400px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "home",
  data() {
    return {
      charts: "",
      opinion: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"],
      opinionData: [
        { value: 335, name: "直接访问" },
        { value: 310, name: "邮件营销" },
        { value: 234, name: "联盟广告" },
        { value: 135, name: "视频广告" },
        { value: 1548, name: "搜索引擎" }
      ]
    };
  },
  methods: {
    drawPie() {
      this.charts = echarts.init(document.getElementById("main"));
      this.charts.setOption({
         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:this.opinionData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
      });
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.drawPie();
    });
  }
};
</script>>