第五章：element、echarts及axios-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

      本章介绍如何挂载Element plus和echarts，并通过axios访问后端数据服务。

  vue中挂载Element plus、echarts和axios

//main中：
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import elementplus from 'element-plus'
import 'element-plus//theme-chalk//index.css' 
import './assets/css/global.css'//自定义设置全局样式
import './assets/fonts/iconfont.css'//设置登陆页面图标
import * as echarts from 'echarts'
const app = createApp(App)
app.use(store).use(router).use(elementplus).mount('#app')
app.config.globalProperties.$echarts = echarts//全局挂载echarts
app.config.globalProperties.$axios = axios //全局挂载axios

接着便可直接使用:

// element-plus
<template>
  <div class="title">商家投诉统计</div>
  <div class="ec">
    <el-table
      :data="tableData"
      height="180"
      border
      style="width: 100%;background-color: #000000;"
      :row-style="{height: '0'}"
      :cell-style="{padding: '0',background:'#000000',color:'#aaff7f'}"
      :header-cell-style="{padding: '0',background:'#000000',color:'#9d9dea',fontSize: '16px'}"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="number.number"
        label="对象编号"
        width="100"
        align="center">
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="180"
        align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

//echats和axios
<script>
export default {
  data() {
    return {
      append: [],
      total: [],
      categories: [],
      numberdata: []
    }
  },
  created() {
  },
  mounted() {
    this.drawech()
  },
  methods: {
    //图表制作
    drawech() {
      let myChart = this.$echarts.init(document.getElementById('number'))
      this.$axios.get('/api/supervision/company')
        .then(response => {
          this.numberdata = response.data
          var a = []
          for (var i = 0; i < this.numberdata.length; i++) {
            a.push(this.numberdata[i].createyear)
          }
          var b = []
          var c = []
          var d = []
          var e = []
          for (var i = 0; i < a.length; i++) {
            if (a[i] < 2005) {
              b.push(a[i])
            }
            if (a[i] > 2005 && a[i] <= 2010) {
              c.push(a[i])
            }
            if (a[i] > 2010 && a[i] <= 2015) {
              d.push(a[i])
            }
            if (a[i] > 2015) {
              e.push(a[i])
            }
          }
          this.categories = [2010, 2015, '至今']
          this.append = [c.length, d.length, e.length]
          this.total = [b.length + c.length, b.length + c.length + d.length, b.length + c.length + d.length + e.length]
          let option = {
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(255, 255, 255, 0.75)',
              axisName: {
                color: '#ffffff',
                fontSize: 10
              },
              formatter: '{b}(年)<br/>现有企业总数:{c0}个<br/>新增企业数量:{c1}个'
            },
            legend: {
              itemHeight: 10,
              itemWidth: 15,
              itemGap: 1,
              textStyle: {
                color: '#E9EEF3',
                fontSize: 10
              },
              lineStyle: {
                width: 3,
                height: 100
              },
              orient: 'vertical',
              bottom: 'bottom'
            },
            grid: {
              containLabel: true,
              bottom: '8%',
              right: '2%',
              left: '2%',
              top: '5%',
            },
            xAxis: {
              axisTick: {
                show: false
              },
              type: 'category',
              axisLabel: {
                axisName: {
                  color: '#E9EEF3',
                  fontSize: 10
                },
                margin: 2
              },
              axisLine: {
                lineStyle: {
                  color: '#E9EEF3',
                  width: 1,
                }
              },
              data: this.categories
            },
            yAxis: {
              axisTick: {
                show: false
              },
              type: 'value',
              axisLabel: {
                axisName: {
                  color: '#E9EEF3',
                  fontSize: 10
                },
                margin: 2
              },
              splitLine: {
                show: true,  //去掉网格线
                lineStyle: {
                  color: '#E9EEF3',
                  width: 0.5,
                  type: 'dotted'
                }
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#E9EEF3',
                  width: 1,
                }
              }
            },
            series: [{
              data: this.total,
              type: 'bar',
              name: '现有总数',
              barWidth: 20, //设置圆柱体的宽度
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#4729FB' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#3077F7' // 50% 处的颜色
                }, {
                  offset: 1,
                  color: '#1FB0F4' // 100% 处的颜色
                }], false)
              },
              // barGap: 0
            },
              {
                data: this.append,
                type: 'bar',
                name: '新增数量',
                barWidth: 20, //设置圆柱体的宽度
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#b67900" // 0% 处的颜色
                  }, {
                    offset: 0.5,
                    color: "#e19600" // 50% 处的颜色
                  }, {
                    offset: 1,
                    color: "#ffaa00" // 100% 处的颜色
                  }], false)
                },
                // barGap: 0
              },
            ]
          }
          window.onresize = myChart.resize
          myChart.setOption(option)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

上一章：第四章：Django绑定数据库并发布数据-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]

下一章-第六章：vue配置supermap iserver及地图发布-[基于Vue、Django、supermap iserver和gerapy的生态旅游web系统开发实例]