1
2
npm install echarts --save

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<template>
  <div class='wrapper'>
    <div class='chart' id='chart'></div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      let chart = this.$echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        chart.resize()
      })
      // 绘制图表
      chart.setOption({
        // 调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色
        color: ['#32A8E6', '#FF954A', '#45E2CF', '#EE5196', '#Eaf'],
        // 图表主标题
        title: {
          text: '用户访问来源', // 主标题文本，支持使用 n 换行
          top: 10, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本样式
            fontSize: 26,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
          textStyle: {
            color: '#fff' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
          formatter: '{a} <br/>{b}: {c}万次'
        },
        // 图例组件
        legend: {
          orient: 'vertical', // 图例列表的布局朝向 水平排列：horizontal  垂直排列：vertical
          top: 10, // 图例组件离容器上侧的距离
          left: 5, // 图例组件离容器左侧的距离
          itemWidth: 18, // 图例标记的图形宽度
          itemHeight: 15, // 图例标记的图形高度
          // 图例项的 icon  值: 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
          icon: 'roundRect', 
          textStyle: { // 文本样式
            fontSize: 14,
            color: '#fff'
          },
          // 图例的数据数组
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
          type: 'pie', // 内圈
          name: '访问来源', // 系列名称，用于tooltip的显示，legend 的图例筛选
          radius: ['30%', '40%'], // 饼图的半径 数组的第一项是内半径，第二项是外半径
          center: ['50%', '53%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
          // 图形样式 饼图的白色边框
          itemStyle: {
            borderWidth: 5, // 描边线宽 为 0 时无描边
            borderColor: '#fff' // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
          },
          // 饼图图形上的文本标签
          label: {
            show: false // 默认 false
          },
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
          labelLine: {
            show: false // 是否显示视觉引导线
          },
          // 系列中的数据内容数组
          data: [{
            value: 100,
            name: '直接访问'
          }, {
            value: 200,
            name: '邮件营销'
          }, {
            value: 200,
            name: '联盟广告'
          }, {
            value: 180,
            name: '视频广告'
          }, {
            value: 320,
            name: '搜索引擎'
          }]
        }, {
          type: 'pie', // 外圈
          name: '访问来源', // 系列名称，用于tooltip的显示，legend 的图例筛选
          radius: ['40%', '60%'], // 饼图的半径 数组的第一项是内半径，第二项是外半径
          center: ['50%', '53%'], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
          hoverAnimation: false, // 是否开启 hover 在扇区上的放大动画效果
          // 图形样式 饼图的白色边框
          itemStyle: {
            borderWidth: 5, // 描边线宽。为 0 时无描边
            borderColor: '#fff' // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
          },
          // 饼图图形上的文本标签
          label: {
            show: true, // 默认 false
            position: 'outline', // 标签的位置 'outside', 'inside', 'inner'同'inside', 'center'
            color: '#fff', // 文字的颜色
            fontSize: 15, // 文字的字体大小
            fontWeight: 600, // 文字字体的粗细
            // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
            // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: '{b}:{d}%'
          },
          // 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。
          labelLine: {
            show: false, // 是否显示视觉引导线
            length: 3 // 视觉引导线第一段的长度
          },
          // 系列中的数据内容数组
          data: [{
            value: 100,
            name: '直接访问'
          }, {
            value: 200,
            name: '邮件营销'
          }, {
            value: 200,
            name: '联盟广告'
          }, {
            value: 180,
            name: '视频广告'
          }, {
            value: 320,
            name: '搜索引擎'
          }]
        }]
      })
    }
  }
}
</script>

<style scoped>
  .wrapper {
    width: 100%;
  }
  .wrapper .chart {
    width: 60%;
    height: 500px;
    margin: 100px 50px 0;
    border: 1px solid #eeeeee;
    background: url(../../public/static/bg.png) no-repeat;
    background-size: 100% 100%;
  }
</style>