vue-echarts的用法

tianyawhl

发布于 2021-06-17 19:03:26

1.6K0

发布于 2021-06-17 19:03:26

文章被收录于专栏：前端之攻略前端之攻略

应对全场景AI框架部署挑战，MindSpore“四招”让你躺平！>>>

原生的Echarts需要定义id，有时候不方便，对于习惯了数据驱动可以使用vue-echarts

npm installl vue-echarts --save

这样会安装6.0以上的版本，6.0的版本是基于vue 3.0，如果我们现在正使用的vue 2.0，安装vue-echarts 要带上版本号

npm install vue-echarts@4.0.2 --save 同时也要安装echarts npm install echarts --save

使用vue-echarts的方法

1、全局

在main.js中

import VueECharts from 'vue-echarts' Vue . component ( 'v-chart' , VueECharts )

在组件中使用的方法

vueEcharts.vue

<template>
  <div style="height:500px">
     <v-chart :options="polar"/>
  </div>
</template>

<script>
export default {
  name: "barChart",
  data() {
    return {
      polar: {
        title : {
            text: '会员数据统计',
            subtext: '动态数据',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: true,
            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)'
                    }
                }
            }
         ]
       }     
    };
  },
  mounted() {
    
  },
  methods: {}
};
</script>
<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

2、按需引入

只在组件中引入，并注册（不要在main.js中引入）

<template>
  <div style="height:500px">
     <v-chart :options="polar"/>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
  name: "barChart",
  components: {
  'v-chart': ECharts
  },
  data() {
    return {
      polar: {
        title : {
            text: '会员数据统计',
            subtext: '动态数据',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            show: true,
            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)'
                    }
                }
            }
         ]
       }     
    };
  },
  mounted() {
    
  },
  methods: {}
};
</script>
<style>
.echarts {
  width: 100%;
  height: 100%;
}
</style>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

npm