Vue中引入echarts。

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、安装

在终端vue项目的文件夹下运行 npm install echarts --save 安装依赖
可以使用 npm install echarts@(“这里可以写版本号”) --save安装指定版本。

提示我之前使用的第一种方式安装、结果出现了错误、弄了我老半天。最终解决的方法是：通过将之前下载的版本卸载掉、然后安装对应的版本

2、在main.js文件中引入

// 引入echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3、测试

<style scoped>

  #sector{

    width: 100%;

    height: 300px;

    margin: 0 auto;

  }

</style>

<template>

  <div id="sector">

  </div>

</template>

<script>

  import echarts from 'echarts'

  export default {

    name:'sector',

    data() {

      return {

        option:{

          title: {

            text: '某站点用户访问来源',

            top:'5%',

            left: 'center'

          },

          tooltip: {

            trigger: 'item',

            formatter: '{a} <br/>{b} : {c}'

          },

          legend: {

            orient: 'vertical',

            left: 'left',

            top:'15%',

            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:{

                normal:{

                  label:{

                    show: true,

                    formatter: '{b} : {c}'

                  },

                  labelLine :{show:true}

                }

              },

              emphasis: {

                itemStyle: {

                  shadowBlur: 10,

                  shadowOffsetX: 0,

                  shadowColor: 'rgba(0, 0, 0, 0.5)',

                }

              }

            }

          ]

        }

      }

    },

    mounted() {

      let this_ = this;

      let chart = echarts.init(document.getElementById('sector'));

      chart.setOption(this.option);

      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）

      window.addEventListener('resize',function() {chart.resize()});

    },

    methods: {},

    watch: {},

    created() {

    }

  }

</script>