唯品秀前端博客
当前位置: 前端开发 > Vue.js专区 > 快速在vue项目中使用vue-echarts图表插件

快速在vue项目中使用vue-echarts图表插件

2020-04-07 分类:Vue.js专区 作者:管理员 阅读(575)

其实网上这种文章很多,主要是之前在百度过程中发现很多帖子多少都有问题各种掉链子,所以在此记录下正确使用的入门姿势,方便自己也方便大家快速引入使用,毕竟使用插件,那就是要明显提升项目速度才行。

项目主环境

vue-cli2.x全家桶,"vue": "^2.3.3","echarts": "^4.7.0","vue-echarts": "^5.0.0-beta.0"

安装插件

1
npm install echarts vue-echarts

注意,很多帖子说的就直接安装vue-echarts,而事实上仅仅安装vue-echarts新版本并不适用,一定要同时安装echarts

webpack.base.conf.js打包配置

该处如果不配置,打包上线后就没经过babel可能会存在如下截图问题,具体配置如下:

打包报错信息:ERROR in static/js/vendor.c1b6362d8d6f5802d99c.js from UglifyJs
Unexpected token: name (raf) [./~/resize-detector/esm/index.js:1,0][static/js/vendor.c1b6362d8d6f5802d99c.js:62349,4]

1
2
3
4
5
6
7
8
9
10
11
{
        test: /\.js$/,
        loader: 'babel-loader',
        // include: [resolve('src'), resolve('test')] //修改此段代码,如下:
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/vue-echarts'),
          resolve('node_modules/resize-detector')
        ]
      },

使用插件两种方式

方式一局部引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
//组件中
<template>
  <div class="content">
    <v-chart :options="options" :auto-resize="true"/>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
// 饼状图
import 'echarts/lib/chart/pie'
// 折线
import 'echarts/lib/chart/line'
// 柱状图
import 'echarts/lib/chart/bar'

// 提示
import 'echarts/lib/component/tooltip'
// 图例
import 'echarts/lib/component/legend'
// 标题
import 'echarts/lib/component/title'

export default {
  components: { 'v-chart': ECharts }, //局部注册
  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.options = {
      // 标题
      title: {
        text: '测试demo',
        x: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 18,
          fontWeight: 'normal'
        }
      },
      // 工具提示
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      // 图例说明
      legend: {
        show: true,
        x: 'center',
        bottom: 30,
        data: ['男生', '女生', '未知', '年龄', '身高'],
        textStyle: { //底部一排按钮
          color: '#333',
          fontSize: 14
        }
      },
      // 各个部分的颜色
      color: ['#18DBDF', '#F6EF7B', '#3DE16F', '#EF69FB', '#FE5679'],
      // 拖拽的时候重新渲染  默认关闭
      calculable: true,
      // 工具箱
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      label: {
        show: true,
        fontSize: 14
      },
      series: [
        {
          itemStyle: {
            normal: {
              label: {
                show: true,
                formatter: '{b} : {c} ({d}%)'
              },
              labelLine: {
                show: true
              }
            }
          },
          name: '访问来源',
          // 类型:这里是饼图
          type: 'pie',
          radius: '50%', //修改饼图大小
          center: ['50%', '40%'],
          // 数据
          data: [
            { value: 335, name: '男生' },
            { value: 310, name: '女生' },
            { value: 234, name: '未知' },
            { value: 135, name: '年龄' },
            { value: 1548, name: '身高' }
          ]
        }
      ]
    }
  }
}
</script>
<style scoped>

.content >>> .echarts {
  width: 600px;
  height: 250px;
}
</style>

方式二全局引入使用

1
2
3
4
//main.js中
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
Vue.component('v-chart', ECharts)
1
2
3
4
5
6
7
//组件中
<template>
  <div class="hello">
    <v-chart ref="chart1" :options="option" :auto-resize="true"></chart>
  </div>
</template>
//为了代码简洁,option内部配置可参考方式一配置

解决auto-resize失效问题

图表自适应 :auto-resize="true" 偶尔不起作用,可添加属性autoresize解决,例如:

1
2
3
<div class="echarts_box">
     <v-chart :options="item" :auto-resize="true" autoresize />
</div>

效果如图

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 1 - 快速在vue项目中使用vue-echarts图表插件

  1. 冰橙柠檬 Windows NT Chrome 57.0.2987.98

    不错哦,学习了

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 253 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 883 条
  • 链接总数: 19 个
  • 标签总数: 450 个
  • 注册用户: 7688 人
  • 访问总量: 9120983 次
  • 最近更新: 2020年5月31日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线