1

npm install echarts -S

1
2
3

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

 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

<template>
      <div>
          <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="8" :lg="8">
                  <el-card class="box-card">
                     <degreeChart></degreeChart> 
                  </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="16" :lg="16">
                  <el-card class="box-card">
                     <moneyLine></moneyLine>
                  </el-card>
              </el-col>
          </el-row>

          <el-row :gutter="20">
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                  <el-card class="box-card">
                      <cityChart></cityChart>
                  </el-card>
              </el-col>
              <el-col :xs="24" :sm="24" :md="12" :lg="12">
                  <el-card class="box-card">
                      <funnelChart></funnelChart>
                  </el-card>
              </el-col>
          </el-row>

      </div>

  </template>

  <script>
      import degreeChart from '../charts/degreeChart.vue';
      import moneyLine from '../charts/moneyLine.vue';
      import cityChart from '../charts/cityChart.vue';
      import funnelChart from '../charts/funnelChart.vue';

      export default {
          components:{
              degreeChart,moneyLine,cityChart,funnelChart
          },
          methods: {
          }
      }
  </script>

  <style scoped>
  </style>

 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

import AmCharts from '@/components/page/BasicCharts';
Vue.use(Router)
export default new Router({
  mode: 'history',
  base: __dirname,
  routes: [
    {
      path: '/',
      component: Home,
      children: [{
        path: '',
        component: DashBoard
      }, {
        path: '/DashBoard',
        component: DashBoard
      }, {
        path: '/BasicCharts',
        component: AmCharts
      }, {
        path: '/TodoList',
        component: TodoList
      }]
    }
  ]
})

  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

<template>
  <div class="echarts">
    <div :style="{height:'400px',width:'100%'}" ref="myEchart"></div>
  </div>
</template>
<script>
var echarts = require('echarts/lib/echarts')
require('echarts/map/js/china')
export default {
  name: "echarts",
  props: ["userJson"],
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.chinaConfigure();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    chinaConfigure() {
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置    
      window.onresize = myChart.resize;
      myChart.setOption({ // 进行相关配置
        // backgroundColor: "#02AFDB",
        title: {
          text: "城市岗位分布",
          x: 'center',
          textStyle: {
            color: "#777",
            fontWeight:'500',
            fontSize:16
          }
        },
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          color: ['#FA8BFF', '#2BFF88', '#2BD2FF']
        },
        geo: { // 这个是重点配置区
          map: 'china', // 表示中国地图
          roam: false, // 是否允许缩放
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: 'rgba(0,0,0,0.4)'
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)',
              areaColor: '#BBE4E9'
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        },
        series: [{
            type: 'scatter',
            coordinateSystem: 'geo' // 对应上方配置
          },
          {
            name: '发布职位', // 浮动框的标题
            type: 'map',
            geoIndex: 0,
            data: [{
              "name": "北京",
              "value": 232
            }, {
              "name": "广东",
              "value": 318
            }, {
              "name": "上海",
              "value": 120
            }, {
              "name": "浙江",
              "value": 84
            }, , {
              "name": "四川",
              "value": 46
            }, {
              "name": "湖北",
              "value": 24
            }, {
              "name": "重庆",
              "value": 20
            }, {
              "name": "陕西",
              "value": 18
            }, {
              "name": "江苏",
              "value": 8
            }, {
              "name": "福建",
              "value": 20
            }, {
              "name": "辽宁",
              "value": 6
            }, {
              "name": "天津",
              "value": 4
            }, {
              "name": "云南",
              "value": 2
            }, {
              "name": "广西",
              "value": 2
            }]
          }
        ]
      })
    }
  }
}

</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

xAxis: [{
  type: 'category',
  data: ['应届生', '1年以内', '1-3年', '3-5年', '5-10年', '10年以上', '不限'],
  axisTick: {
    alignWithLabel: true
  },
  axisLabel: {
    interval: 0,
    rotate: -40
    formatter: function(value) { //竖直显示
      return value.split("").join("\n");
    }
  }
}]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

axisLabel: {
  interval: 0,
  formatter: function(params, index) { //隔一行显示
    if (index % 2 != 0) {
      return '\n\n' + params;
    } else {
      return params;
    }
  }
}