echarts

build/webpack.base.conf.js

@@ -102,7 +102,7 @@ module.exports = {
   // 引入外部库, 无需webpack打包处理
   externals: {
     mockjs: 'Mock',
-    echarts: 'echarts',
+    // echarts: 'echarts',
     ueditor: 'UE'
   }
 }

package.json

@@ -18,6 +18,7 @@
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",
     "core-js": "^3.12.1",
+    "echarts": "^5.3.2",
     "element-ui": "^2.13.1",
     "gulp": "3.9.1",
     "gulp-concat": "2.6.1",

src/main.js

@@ -15,7 +15,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import SuperFlow from './views/modules/common/vue-super-flow/index'
 import html2pdf from '@/api/pdf'
 import Print from 'vue-print-nb'
-// import * as echarts from 'echarts'
+import * as echarts from 'echarts'
 import ElementUI from 'element-ui'
 import Contextmenu from 'vue-contextmenujs'
 
@@ -33,7 +33,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 // 挂载全局
-// Vue.prototype.$echarts = echarts
+Vue.prototype.$echarts = echarts
 Vue.prototype.$http = httpRequest // ajax请求方法
 Vue.prototype.isAuth = isAuth     // 权限方法
 

src/views/demo/echarts.vue

@@ -1,472 +1,472 @@
-<template>
-  <div class="mod-demo-echarts">
-    <el-alert
-      title="提示："
-      type="warning"
-      :closable="false">
-      <div slot-scope="description">
-        <p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p>
-      </div>
-    </el-alert>
+<!--<template>-->
+<!--  <div class="mod-demo-echarts">-->
+<!--    <el-alert-->
+<!--      title="提示："-->
+<!--      type="warning"-->
+<!--      :closable="false">-->
+<!--      <div slot-scope="description">-->
+<!--        <p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p>-->
+<!--      </div>-->
+<!--    </el-alert>-->
 
-    <el-row :gutter="20">
-      <el-col :span="24">
-        <el-card>
-          <div id="J_chartLineBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="24">
-        <el-card>
-          <div id="J_chartBarBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card>
-          <div id="J_chartPieBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-      <el-col :span="12">
-        <el-card>
-          <div id="J_chartScatterBox" class="chart-box"></div>
-        </el-card>
-      </el-col>
-    </el-row>
-  </div>
-</template>
+<!--    <el-row :gutter="20">-->
+<!--      <el-col :span="24">-->
+<!--        <el-card>-->
+<!--          <div id="J_chartLineBox" class="chart-box"></div>-->
+<!--        </el-card>-->
+<!--      </el-col>-->
+<!--      <el-col :span="24">-->
+<!--        <el-card>-->
+<!--          <div id="J_chartBarBox" class="chart-box"></div>-->
+<!--        </el-card>-->
+<!--      </el-col>-->
+<!--      <el-col :span="12">-->
+<!--        <el-card>-->
+<!--          <div id="J_chartPieBox" class="chart-box"></div>-->
+<!--        </el-card>-->
+<!--      </el-col>-->
+<!--      <el-col :span="12">-->
+<!--        <el-card>-->
+<!--          <div id="J_chartScatterBox" class="chart-box"></div>-->
+<!--        </el-card>-->
+<!--      </el-col>-->
+<!--    </el-row>-->
+<!--  </div>-->
+<!--</template>-->
 
-<script>
-  import echarts from 'echarts'
-  export default {
-    data () {
-      return {
-        chartLine: null,
-        chartBar: null,
-        chartPie: null,
-        chartScatter: null
-      }
-    },
-    mounted () {
-      this.initChartLine()
-      this.initChartBar()
-      this.initChartPie()
-      this.initChartScatter()
-    },
-    activated () {
-      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
-      if (this.chartLine) {
-        this.chartLine.resize()
-      }
-      if (this.chartBar) {
-        this.chartBar.resize()
-      }
-      if (this.chartPie) {
-        this.chartPie.resize()
-      }
-      if (this.chartScatter) {
-        this.chartScatter.resize()
-      }
-    },
-    methods: {
-      // 折线图
-      initChartLine () {
-        var option = {
-          'title': {
-            'text': '折线图堆叠'
-          },
-          'tooltip': {
-            'trigger': 'axis'
-          },
-          'legend': {
-            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
-          },
-          'grid': {
-            'left': '3%',
-            'right': '4%',
-            'bottom': '3%',
-            'containLabel': true
-          },
-          'toolbox': {
-            'feature': {
-              'saveAsImage': { }
-            }
-          },
-          'xAxis': {
-            'type': 'category',
-            'boundaryGap': false,
-            'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
-          },
-          'yAxis': {
-            'type': 'value'
-          },
-          'series': [
-            {
-              'name': '邮件营销',
-              'type': 'line',
-              'stack': '总量',
-              'data': [ 120, 132, 101, 134, 90, 230, 210 ]
-            },
-            {
-              'name': '联盟广告',
-              'type': 'line',
-              'stack': '总量',
-              'data': [ 220, 182, 191, 234, 290, 330, 310 ]
-            },
-            {
-              'name': '视频广告',
-              'type': 'line',
-              'stack': '总量',
-              'data': [ 150, 232, 201, 154, 190, 330, 410 ]
-            },
-            {
-              'name': '直接访问',
-              'type': 'line',
-              'stack': '总量',
-              'data': [ 320, 332, 301, 334, 390, 330, 320 ]
-            },
-            {
-              'name': '搜索引擎',
-              'type': 'line',
-              'stack': '总量',
-              'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ]
-            }
-          ]
-        }
-        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
-        this.chartLine.setOption(option)
-        window.addEventListener('resize', () => {
-          this.chartLine.resize()
-        })
-      },
-      // 柱状图
-      initChartBar () {
-        var option = {
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              type: 'shadow'
-            }
-          },
-          legend: {
-            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
-          },
-          grid: {
-            left: '3%',
-            right: '4%',
-            bottom: '3%',
-            containLabel: true
-          },
-          xAxis: [
-            {
-              type: 'category',
-              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-            }
-          ],
-          yAxis: [
-            {
-              type: 'value'
-            }
-          ],
-          series: [
-            {
-              name: '直接访问',
-              type: 'bar',
-              data: [320, 332, 301, 334, 390, 330, 320]
-            },
-            {
-              name: '邮件营销',
-              type: 'bar',
-              stack: '广告',
-              data: [120, 132, 101, 134, 90, 230, 210]
-            },
-            {
-              name: '联盟广告',
-              type: 'bar',
-              stack: '广告',
-              data: [220, 182, 191, 234, 290, 330, 310]
-            },
-            {
-              name: '视频广告',
-              type: 'bar',
-              stack: '广告',
-              data: [150, 232, 201, 154, 190, 330, 410]
-            },
-            {
-              name: '搜索引擎',
-              type: 'bar',
-              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
-              markLine: {
-                lineStyle: {
-                  normal: {
-                    type: 'dashed'
-                  }
-                },
-                data: [
-                  [{ type: 'min' }, { type: 'max' }]
-                ]
-              }
-            },
-            {
-              name: '百度',
-              type: 'bar',
-              barWidth: 5,
-              stack: '搜索引擎',
-              data: [620, 732, 701, 734, 1090, 1130, 1120]
-            },
-            {
-              name: '谷歌',
-              type: 'bar',
-              stack: '搜索引擎',
-              data: [120, 132, 101, 134, 290, 230, 220]
-            },
-            {
-              name: '必应',
-              type: 'bar',
-              stack: '搜索引擎',
-              data: [60, 72, 71, 74, 190, 130, 110]
-            },
-            {
-              name: '其他',
-              type: 'bar',
-              stack: '搜索引擎',
-              data: [62, 82, 91, 84, 109, 110, 120]
-            }
-          ]
-        }
-        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
-        this.chartBar.setOption(option)
-        window.addEventListener('resize', () => {
-          this.chartBar.resize()
-        })
-      },
-      // 饼状图
-      initChartPie () {
-        var option = {
-          backgroundColor: '#2c343c',
-          title: {
-            text: 'Customized Pie',
-            left: 'center',
-            top: 20,
-            textStyle: {
-              color: '#ccc'
-            }
-          },
-          tooltip: {
-            trigger: 'item',
-            formatter: '{a} <br/>{b} : {c} ({d}%)'
-          },
-          visualMap: {
-            show: false,
-            min: 80,
-            max: 600,
-            inRange: {
-              colorLightness: [0, 1]
-            }
-          },
-          series: [
-            {
-              name: '访问来源',
-              type: 'pie',
-              radius: '55%',
-              center: ['50%', '50%'],
-              data: [
-                { value: 335, name: '直接访问' },
-                { value: 310, name: '邮件营销' },
-                { value: 274, name: '联盟广告' },
-                { value: 235, name: '视频广告' },
-                { value: 400, name: '搜索引擎' }
-              ].sort(function (a, b) { return a.value - b.value }),
-              roseType: 'radius',
-              label: {
-                normal: {
-                  textStyle: {
-                    color: 'rgba(255, 255, 255, 0.3)'
-                  }
-                }
-              },
-              labelLine: {
-                normal: {
-                  lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.3)'
-                  },
-                  smooth: 0.2,
-                  length: 10,
-                  length2: 20
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: '#c23531',
-                  shadowBlur: 200,
-                  shadowColor: 'rgba(0, 0, 0, 0.5)'
-                }
-              },
-              animationType: 'scale',
-              animationEasing: 'elasticOut',
-              animationDelay: function (idx) {
-                return Math.random() * 200
-              }
-            }
-          ]
-        }
-        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
-        this.chartPie.setOption(option)
-        window.addEventListener('resize', () => {
-          this.chartPie.resize()
-        })
-      },
-      // 散点图
-      initChartScatter () {
-        var option = {
-          backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
-            { offset: 0, color: '#f7f8fa' },
-            { offset: 1, color: '#cdd0d5' }
-          ]),
-          title: {
-            text: '1990 与 2015 年各国家人均寿命与 GDP'
-          },
-          legend: {
-            right: 10,
-            data: ['1990', '2015']
-          },
-          xAxis: {
-            splitLine: {
-              lineStyle: {
-                type: 'dashed'
-              }
-            }
-          },
-          yAxis: {
-            splitLine: {
-              lineStyle: {
-                type: 'dashed'
-              }
-            },
-            scale: true
-          },
-          series: [
-            {
-              name: '1990',
-              data: [
-                [28604, 77, 17096869, 'Australia', 1990],
-                [31163, 77.4, 27662440, 'Canada', 1990],
-                [1516, 68, 1154605773, 'China', 1990],
-                [13670, 74.7, 10582082, 'Cuba', 1990],
-                [28599, 75, 4986705, 'Finland', 1990],
-                [29476, 77.1, 56943299, 'France', 1990],
-                [31476, 75.4, 78958237, 'Germany', 1990],
-                [28666, 78.1, 254830, 'Iceland', 1990],
-                [1777, 57.7, 870601776, 'India', 1990],
-                [29550, 79.1, 122249285, 'Japan', 1990],
-                [2076, 67.9, 20194354, 'North Korea', 1990],
-                [12087, 72, 42972254, 'South Korea', 1990],
-                [24021, 75.4, 3397534, 'New Zealand', 1990],
-                [43296, 76.8, 4240375, 'Norway', 1990],
-                [10088, 70.8, 38195258, 'Poland', 1990],
-                [19349, 69.6, 147568552, 'Russia', 1990],
-                [10670, 67.3, 53994605, 'Turkey', 1990],
-                [26424, 75.7, 57110117, 'United Kingdom', 1990],
-                [37062, 75.4, 252847810, 'United States', 1990]
-              ],
-              type: 'scatter',
-              symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2
-              },
-              label: {
-                emphasis: {
-                  show: true,
-                  formatter: function (param) {
-                    return param.data[3]
-                  },
-                  position: 'top'
-                }
-              },
-              itemStyle: {
-                normal: {
-                  shadowBlur: 10,
-                  shadowColor: 'rgba(120, 36, 50, 0.5)',
-                  shadowOffsetY: 5,
-                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
-                    { offset: 0, color: 'rgb(251, 118, 123)' },
-                    { offset: 1, color: 'rgb(204, 46, 72)' }
-                  ])
-                }
-              }
-            },
-            {
-              name: '2015',
-              data: [
-                [44056, 81.8, 23968973, 'Australia', 2015],
-                [43294, 81.7, 35939927, 'Canada', 2015],
-                [13334, 76.9, 1376048943, 'China', 2015],
-                [21291, 78.5, 11389562, 'Cuba', 2015],
-                [38923, 80.8, 5503457, 'Finland', 2015],
-                [37599, 81.9, 64395345, 'France', 2015],
-                [44053, 81.1, 80688545, 'Germany', 2015],
-                [42182, 82.8, 329425, 'Iceland', 2015],
-                [5903, 66.8, 1311050527, 'India', 2015],
-                [36162, 83.5, 126573481, 'Japan', 2015],
-                [1390, 71.4, 25155317, 'North Korea', 2015],
-                [34644, 80.7, 50293439, 'South Korea', 2015],
-                [34186, 80.6, 4528526, 'New Zealand', 2015],
-                [64304, 81.6, 5210967, 'Norway', 2015],
-                [24787, 77.3, 38611794, 'Poland', 2015],
-                [23038, 73.13, 143456918, 'Russia', 2015],
-                [19360, 76.5, 78665830, 'Turkey', 2015],
-                [38225, 81.4, 64715810, 'United Kingdom', 2015],
-                [53354, 79.1, 321773631, 'United States', 2015]
-              ],
-              type: 'scatter',
-              symbolSize: function (data) {
-                return Math.sqrt(data[2]) / 5e2
-              },
-              label: {
-                emphasis: {
-                  show: true,
-                  formatter: function (param) {
-                    return param.data[3]
-                  },
-                  position: 'top'
-                }
-              },
-              itemStyle: {
-                normal: {
-                  shadowBlur: 10,
-                  shadowColor: 'rgba(25, 100, 150, 0.5)',
-                  shadowOffsetY: 5,
-                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
-                    { offset: 0, color: 'rgb(129, 227, 238)' },
-                    { offset: 1, color: 'rgb(25, 183, 207)' }
-                  ])
-                }
-              }
-            }
-          ]
-        }
-        this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
-        this.chartPie.setOption(option)
-        window.addEventListener('resize', () => {
-          this.chartPie.resize()
-        })
-      }
-    }
-  }
-</script>
+<!--<script>-->
+<!--  import echarts from 'echarts'-->
+<!--  export default {-->
+<!--    data () {-->
+<!--      return {-->
+<!--        chartLine: null,-->
+<!--        chartBar: null,-->
+<!--        chartPie: null,-->
+<!--        chartScatter: null-->
+<!--      }-->
+<!--    },-->
+<!--    mounted () {-->
+<!--      this.initChartLine()-->
+<!--      this.initChartBar()-->
+<!--      this.initChartPie()-->
+<!--      this.initChartScatter()-->
+<!--    },-->
+<!--    activated () {-->
+<!--      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug-->
+<!--      if (this.chartLine) {-->
+<!--        this.chartLine.resize()-->
+<!--      }-->
+<!--      if (this.chartBar) {-->
+<!--        this.chartBar.resize()-->
+<!--      }-->
+<!--      if (this.chartPie) {-->
+<!--        this.chartPie.resize()-->
+<!--      }-->
+<!--      if (this.chartScatter) {-->
+<!--        this.chartScatter.resize()-->
+<!--      }-->
+<!--    },-->
+<!--    methods: {-->
+<!--      // 折线图-->
+<!--      initChartLine () {-->
+<!--        var option = {-->
+<!--          'title': {-->
+<!--            'text': '折线图堆叠'-->
+<!--          },-->
+<!--          'tooltip': {-->
+<!--            'trigger': 'axis'-->
+<!--          },-->
+<!--          'legend': {-->
+<!--            'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]-->
+<!--          },-->
+<!--          'grid': {-->
+<!--            'left': '3%',-->
+<!--            'right': '4%',-->
+<!--            'bottom': '3%',-->
+<!--            'containLabel': true-->
+<!--          },-->
+<!--          'toolbox': {-->
+<!--            'feature': {-->
+<!--              'saveAsImage': { }-->
+<!--            }-->
+<!--          },-->
+<!--          'xAxis': {-->
+<!--            'type': 'category',-->
+<!--            'boundaryGap': false,-->
+<!--            'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]-->
+<!--          },-->
+<!--          'yAxis': {-->
+<!--            'type': 'value'-->
+<!--          },-->
+<!--          'series': [-->
+<!--            {-->
+<!--              'name': '邮件营销',-->
+<!--              'type': 'line',-->
+<!--              'stack': '总量',-->
+<!--              'data': [ 120, 132, 101, 134, 90, 230, 210 ]-->
+<!--            },-->
+<!--            {-->
+<!--              'name': '联盟广告',-->
+<!--              'type': 'line',-->
+<!--              'stack': '总量',-->
+<!--              'data': [ 220, 182, 191, 234, 290, 330, 310 ]-->
+<!--            },-->
+<!--            {-->
+<!--              'name': '视频广告',-->
+<!--              'type': 'line',-->
+<!--              'stack': '总量',-->
+<!--              'data': [ 150, 232, 201, 154, 190, 330, 410 ]-->
+<!--            },-->
+<!--            {-->
+<!--              'name': '直接访问',-->
+<!--              'type': 'line',-->
+<!--              'stack': '总量',-->
+<!--              'data': [ 320, 332, 301, 334, 390, 330, 320 ]-->
+<!--            },-->
+<!--            {-->
+<!--              'name': '搜索引擎',-->
+<!--              'type': 'line',-->
+<!--              'stack': '总量',-->
+<!--              'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ]-->
+<!--            }-->
+<!--          ]-->
+<!--        }-->
+<!--        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))-->
+<!--        this.chartLine.setOption(option)-->
+<!--        window.addEventListener('resize', () => {-->
+<!--          this.chartLine.resize()-->
+<!--        })-->
+<!--      },-->
+<!--      // 柱状图-->
+<!--      initChartBar () {-->
+<!--        var option = {-->
+<!--          tooltip: {-->
+<!--            trigger: 'axis',-->
+<!--            axisPointer: {-->
+<!--              type: 'shadow'-->
+<!--            }-->
+<!--          },-->
+<!--          legend: {-->
+<!--            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']-->
+<!--          },-->
+<!--          grid: {-->
+<!--            left: '3%',-->
+<!--            right: '4%',-->
+<!--            bottom: '3%',-->
+<!--            containLabel: true-->
+<!--          },-->
+<!--          xAxis: [-->
+<!--            {-->
+<!--              type: 'category',-->
+<!--              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']-->
+<!--            }-->
+<!--          ],-->
+<!--          yAxis: [-->
+<!--            {-->
+<!--              type: 'value'-->
+<!--            }-->
+<!--          ],-->
+<!--          series: [-->
+<!--            {-->
+<!--              name: '直接访问',-->
+<!--              type: 'bar',-->
+<!--              data: [320, 332, 301, 334, 390, 330, 320]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '邮件营销',-->
+<!--              type: 'bar',-->
+<!--              stack: '广告',-->
+<!--              data: [120, 132, 101, 134, 90, 230, 210]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '联盟广告',-->
+<!--              type: 'bar',-->
+<!--              stack: '广告',-->
+<!--              data: [220, 182, 191, 234, 290, 330, 310]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '视频广告',-->
+<!--              type: 'bar',-->
+<!--              stack: '广告',-->
+<!--              data: [150, 232, 201, 154, 190, 330, 410]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '搜索引擎',-->
+<!--              type: 'bar',-->
+<!--              data: [862, 1018, 964, 1026, 1679, 1600, 1570],-->
+<!--              markLine: {-->
+<!--                lineStyle: {-->
+<!--                  normal: {-->
+<!--                    type: 'dashed'-->
+<!--                  }-->
+<!--                },-->
+<!--                data: [-->
+<!--                  [{ type: 'min' }, { type: 'max' }]-->
+<!--                ]-->
+<!--              }-->
+<!--            },-->
+<!--            {-->
+<!--              name: '百度',-->
+<!--              type: 'bar',-->
+<!--              barWidth: 5,-->
+<!--              stack: '搜索引擎',-->
+<!--              data: [620, 732, 701, 734, 1090, 1130, 1120]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '谷歌',-->
+<!--              type: 'bar',-->
+<!--              stack: '搜索引擎',-->
+<!--              data: [120, 132, 101, 134, 290, 230, 220]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '必应',-->
+<!--              type: 'bar',-->
+<!--              stack: '搜索引擎',-->
+<!--              data: [60, 72, 71, 74, 190, 130, 110]-->
+<!--            },-->
+<!--            {-->
+<!--              name: '其他',-->
+<!--              type: 'bar',-->
+<!--              stack: '搜索引擎',-->
+<!--              data: [62, 82, 91, 84, 109, 110, 120]-->
+<!--            }-->
+<!--          ]-->
+<!--        }-->
+<!--        this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))-->
+<!--        this.chartBar.setOption(option)-->
+<!--        window.addEventListener('resize', () => {-->
+<!--          this.chartBar.resize()-->
+<!--        })-->
+<!--      },-->
+<!--      // 饼状图-->
+<!--      initChartPie () {-->
+<!--        var option = {-->
+<!--          backgroundColor: '#2c343c',-->
+<!--          title: {-->
+<!--            text: 'Customized Pie',-->
+<!--            left: 'center',-->
+<!--            top: 20,-->
+<!--            textStyle: {-->
+<!--              color: '#ccc'-->
+<!--            }-->
+<!--          },-->
+<!--          tooltip: {-->
+<!--            trigger: 'item',-->
+<!--            formatter: '{a} <br/>{b} : {c} ({d}%)'-->
+<!--          },-->
+<!--          visualMap: {-->
+<!--            show: false,-->
+<!--            min: 80,-->
+<!--            max: 600,-->
+<!--            inRange: {-->
+<!--              colorLightness: [0, 1]-->
+<!--            }-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              name: '访问来源',-->
+<!--              type: 'pie',-->
+<!--              radius: '55%',-->
+<!--              center: ['50%', '50%'],-->
+<!--              data: [-->
+<!--                { value: 335, name: '直接访问' },-->
+<!--                { value: 310, name: '邮件营销' },-->
+<!--                { value: 274, name: '联盟广告' },-->
+<!--                { value: 235, name: '视频广告' },-->
+<!--                { value: 400, name: '搜索引擎' }-->
+<!--              ].sort(function (a, b) { return a.value - b.value }),-->
+<!--              roseType: 'radius',-->
+<!--              label: {-->
+<!--                normal: {-->
+<!--                  textStyle: {-->
+<!--                    color: 'rgba(255, 255, 255, 0.3)'-->
+<!--                  }-->
+<!--                }-->
+<!--              },-->
+<!--              labelLine: {-->
+<!--                normal: {-->
+<!--                  lineStyle: {-->
+<!--                    color: 'rgba(255, 255, 255, 0.3)'-->
+<!--                  },-->
+<!--                  smooth: 0.2,-->
+<!--                  length: 10,-->
+<!--                  length2: 20-->
+<!--                }-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  color: '#c23531',-->
+<!--                  shadowBlur: 200,-->
+<!--                  shadowColor: 'rgba(0, 0, 0, 0.5)'-->
+<!--                }-->
+<!--              },-->
+<!--              animationType: 'scale',-->
+<!--              animationEasing: 'elasticOut',-->
+<!--              animationDelay: function (idx) {-->
+<!--                return Math.random() * 200-->
+<!--              }-->
+<!--            }-->
+<!--          ]-->
+<!--        }-->
+<!--        this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))-->
+<!--        this.chartPie.setOption(option)-->
+<!--        window.addEventListener('resize', () => {-->
+<!--          this.chartPie.resize()-->
+<!--        })-->
+<!--      },-->
+<!--      // 散点图-->
+<!--      initChartScatter () {-->
+<!--        var option = {-->
+<!--          backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [-->
+<!--            { offset: 0, color: '#f7f8fa' },-->
+<!--            { offset: 1, color: '#cdd0d5' }-->
+<!--          ]),-->
+<!--          title: {-->
+<!--            text: '1990 与 2015 年各国家人均寿命与 GDP'-->
+<!--          },-->
+<!--          legend: {-->
+<!--            right: 10,-->
+<!--            data: ['1990', '2015']-->
+<!--          },-->
+<!--          xAxis: {-->
+<!--            splitLine: {-->
+<!--              lineStyle: {-->
+<!--                type: 'dashed'-->
+<!--              }-->
+<!--            }-->
+<!--          },-->
+<!--          yAxis: {-->
+<!--            splitLine: {-->
+<!--              lineStyle: {-->
+<!--                type: 'dashed'-->
+<!--              }-->
+<!--            },-->
+<!--            scale: true-->
+<!--          },-->
+<!--          series: [-->
+<!--            {-->
+<!--              name: '1990',-->
+<!--              data: [-->
+<!--                [28604, 77, 17096869, 'Australia', 1990],-->
+<!--                [31163, 77.4, 27662440, 'Canada', 1990],-->
+<!--                [1516, 68, 1154605773, 'China', 1990],-->
+<!--                [13670, 74.7, 10582082, 'Cuba', 1990],-->
+<!--                [28599, 75, 4986705, 'Finland', 1990],-->
+<!--                [29476, 77.1, 56943299, 'France', 1990],-->
+<!--                [31476, 75.4, 78958237, 'Germany', 1990],-->
+<!--                [28666, 78.1, 254830, 'Iceland', 1990],-->
+<!--                [1777, 57.7, 870601776, 'India', 1990],-->
+<!--                [29550, 79.1, 122249285, 'Japan', 1990],-->
+<!--                [2076, 67.9, 20194354, 'North Korea', 1990],-->
+<!--                [12087, 72, 42972254, 'South Korea', 1990],-->
+<!--                [24021, 75.4, 3397534, 'New Zealand', 1990],-->
+<!--                [43296, 76.8, 4240375, 'Norway', 1990],-->
+<!--                [10088, 70.8, 38195258, 'Poland', 1990],-->
+<!--                [19349, 69.6, 147568552, 'Russia', 1990],-->
+<!--                [10670, 67.3, 53994605, 'Turkey', 1990],-->
+<!--                [26424, 75.7, 57110117, 'United Kingdom', 1990],-->
+<!--                [37062, 75.4, 252847810, 'United States', 1990]-->
+<!--              ],-->
+<!--              type: 'scatter',-->
+<!--              symbolSize: function (data) {-->
+<!--                return Math.sqrt(data[2]) / 5e2-->
+<!--              },-->
+<!--              label: {-->
+<!--                emphasis: {-->
+<!--                  show: true,-->
+<!--                  formatter: function (param) {-->
+<!--                    return param.data[3]-->
+<!--                  },-->
+<!--                  position: 'top'-->
+<!--                }-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  shadowBlur: 10,-->
+<!--                  shadowColor: 'rgba(120, 36, 50, 0.5)',-->
+<!--                  shadowOffsetY: 5,-->
+<!--                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [-->
+<!--                    { offset: 0, color: 'rgb(251, 118, 123)' },-->
+<!--                    { offset: 1, color: 'rgb(204, 46, 72)' }-->
+<!--                  ])-->
+<!--                }-->
+<!--              }-->
+<!--            },-->
+<!--            {-->
+<!--              name: '2015',-->
+<!--              data: [-->
+<!--                [44056, 81.8, 23968973, 'Australia', 2015],-->
+<!--                [43294, 81.7, 35939927, 'Canada', 2015],-->
+<!--                [13334, 76.9, 1376048943, 'China', 2015],-->
+<!--                [21291, 78.5, 11389562, 'Cuba', 2015],-->
+<!--                [38923, 80.8, 5503457, 'Finland', 2015],-->
+<!--                [37599, 81.9, 64395345, 'France', 2015],-->
+<!--                [44053, 81.1, 80688545, 'Germany', 2015],-->
+<!--                [42182, 82.8, 329425, 'Iceland', 2015],-->
+<!--                [5903, 66.8, 1311050527, 'India', 2015],-->
+<!--                [36162, 83.5, 126573481, 'Japan', 2015],-->
+<!--                [1390, 71.4, 25155317, 'North Korea', 2015],-->
+<!--                [34644, 80.7, 50293439, 'South Korea', 2015],-->
+<!--                [34186, 80.6, 4528526, 'New Zealand', 2015],-->
+<!--                [64304, 81.6, 5210967, 'Norway', 2015],-->
+<!--                [24787, 77.3, 38611794, 'Poland', 2015],-->
+<!--                [23038, 73.13, 143456918, 'Russia', 2015],-->
+<!--                [19360, 76.5, 78665830, 'Turkey', 2015],-->
+<!--                [38225, 81.4, 64715810, 'United Kingdom', 2015],-->
+<!--                [53354, 79.1, 321773631, 'United States', 2015]-->
+<!--              ],-->
+<!--              type: 'scatter',-->
+<!--              symbolSize: function (data) {-->
+<!--                return Math.sqrt(data[2]) / 5e2-->
+<!--              },-->
+<!--              label: {-->
+<!--                emphasis: {-->
+<!--                  show: true,-->
+<!--                  formatter: function (param) {-->
+<!--                    return param.data[3]-->
+<!--                  },-->
+<!--                  position: 'top'-->
+<!--                }-->
+<!--              },-->
+<!--              itemStyle: {-->
+<!--                normal: {-->
+<!--                  shadowBlur: 10,-->
+<!--                  shadowColor: 'rgba(25, 100, 150, 0.5)',-->
+<!--                  shadowOffsetY: 5,-->
+<!--                  color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [-->
+<!--                    { offset: 0, color: 'rgb(129, 227, 238)' },-->
+<!--                    { offset: 1, color: 'rgb(25, 183, 207)' }-->
+<!--                  ])-->
+<!--                }-->
+<!--              }-->
+<!--            }-->
+<!--          ]-->
+<!--        }-->
+<!--        this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))-->
+<!--        this.chartPie.setOption(option)-->
+<!--        window.addEventListener('resize', () => {-->
+<!--          this.chartPie.resize()-->
+<!--        })-->
+<!--      }-->
+<!--    }-->
+<!--  }-->
+<!--</script>-->
 
-<style lang="scss">
-  .mod-demo-echarts {
-    > .el-alert {
-      margin-bottom: 10px;
-    }
-    > .el-row {
-      margin-top: -10px;
-      margin-bottom: -10px;
-      .el-col {
-        padding-top: 10px;
-        padding-bottom: 10px;
-      }
-    }
-    .chart-box {
-      min-height: 400px;
-    }
-  }
-</style>
+<!--<style lang="scss">-->
+<!--  .mod-demo-echarts {-->
+<!--    > .el-alert {-->
+<!--      margin-bottom: 10px;-->
+<!--    }-->
+<!--    > .el-row {-->
+<!--      margin-top: -10px;-->
+<!--      margin-bottom: -10px;-->
+<!--      .el-col {-->
+<!--        padding-top: 10px;-->
+<!--        padding-bottom: 10px;-->
+<!--      }-->
+<!--    }-->
+<!--    .chart-box {-->
+<!--      min-height: 400px;-->
+<!--    }-->
+<!--  }-->
+<!--</style>-->

src/views/modules/cus/contract-statistics-annual-report.vue

@@ -1,9 +1,78 @@
+<!-- 年度合同统计 -->
 <template>
   <div>
     <div class="my-title">年度合同统计</div>
     <div style="margin-left: 20px;margin-right: 20px">
-      <!-- todo -->
-      <div id="myChart" :style="{width: '600px', height: '300px'}"></div>
+      <el-row>
+        <el-col :span="6">
+          <section class="parent">
+            <section>
+              <img class="my-img" src="../../../assets/img/statistics/hetong.png" alt="none"/>
+            </section>
+            <section>
+              <span>已签订的合同数（个）</span>
+            </section>
+            <section>
+              <b>{{dataResult.historyNum}}</b>
+            </section>
+          </section>
+        </el-col>
+        <el-col :span="6">
+          <section class="parent">
+            <section>
+              <img class="my-img" src="../../../assets/img/statistics/jine.png" alt="none"/>
+            </section>
+            <section>
+              <span>已签订的合同总金额</span>
+            </section>
+            <section>
+              <b>{{dataResult.historyTotalAmount}}</b>
+            </section>
+          </section>
+        </el-col>
+        <el-col :span="6">
+          <section class="parent">
+            <section>
+              <img class="my-img" src="../../../assets/img/statistics/hetong.png" alt="none"/>
+            </section>
+            <section>
+              <span>当年统计年份合同总数</span>
+            </section>
+            <section>
+              <b>{{dataResult.yearNum}}</b>
+            </section>
+          </section>
+        </el-col>
+        <el-col :span="6">
+          <section class="parent">
+            <section>
+              <img class="my-img" src="../../../assets/img/statistics/jine.png" alt="none"/>
+            </section>
+            <section>
+              <span>当年统计年份合同总金额</span>
+            </section>
+            <section>
+              <b>{{dataResult.yearTotalAmount}}</b>
+            </section>
+          </section>
+        </el-col>
+      </el-row>
+      <div style="margin-top: 50px">
+        <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()">
+          <el-form-item label="年份" prop="year">
+            <el-date-picker
+              v-model="dataForm.year"
+              type="year"
+              value-format="yyyy"
+              placeholder="选择">
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="search()">查询</el-button>
+          </el-form-item>
+        </el-form>
+        <div id="myChart" style="height: 600px"></div>
+      </div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="onChose">返回</el-button>
@@ -12,7 +81,6 @@
 </template>
 
 <script>
-  // import echarts from 'echarts'
   import EDesc from '../common/e-desc'
   import EDescItem from '../common/e-desc-item'
   export default {
@@ -23,38 +91,46 @@
     data () {
       return {
         id: 0,
-        dataForm: {}
+        myChart: null,
+        dataResult: {},
+        dataForm: {
+          year: (new Date()).getFullYear().toString()
+        },
+        myChartValList: []
       }
     },
     methods: {
       onChose () {
         this.$emit('onChose')
       },
+      // 查询
+      search () {
+        this.getDetails()
+      },
       async init (id) {
         this.id = id || 0
-        this.dataForm = {
-          year: 2020
-        }
-        // this.drawLine()
         this.getDetails()
       },
       drawLine () {
-        // // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
-        // let myChart = this.$echarts.init(document.getElementById('myChart'))
-        // // 绘制图表
-        // myChart.setOption({
-        //   title: { text: '太阳系八大行星的卫星数量' },
-        //   tooltip: {},
-        //   xAxis: {
-        //     data: ['水星', '金星', '地球', '火星', '木星', '土星', '金王星', '海王星']
-        //   },
-        //   yAxis: {},
-        //   series: [{
-        //     name: '数量',
-        //     type: 'bar',
-        //     data: [0, 0, 1, 2, 79, 82, 27, 14]
-        //   }]
-        // })
+        // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
+        this.myChart = this.$echarts.init(document.getElementById('myChart'))
+        // 绘制图表
+        this.myChart.setOption({
+          title: { text: '当前统计合同趋势' + ' (' + this.dataForm.year + '年) ' },
+          tooltip: {},
+          xAxis: {
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          },
+          yAxis: {},
+          series: [{
+            name: '数量',
+            type: 'line',
+            data: this.myChartValList
+          }]
+        })
+        window.addEventListener('resize', () => {
+          this.myChart.resize()
+        })
       },
       getDetails () {
         this.$http({
@@ -65,10 +141,30 @@
           })
         }).then(({data}) => {
           if (data && data.code === '200') {
-            this.dataForm = data.data
+            this.dataResult = data.data
+            if (data.data.censusMonthInfo) {
+              this.myChartValList[0] = data.data.censusMonthInfo[0].January.num
+              this.myChartValList[1] = data.data.censusMonthInfo[1].February.num
+              this.myChartValList[2] = data.data.censusMonthInfo[2].March.num
+              this.myChartValList[3] = data.data.censusMonthInfo[3].April.num
+              this.myChartValList[4] = data.data.censusMonthInfo[4].May.num
+              this.myChartValList[5] = data.data.censusMonthInfo[5].June.num
+              this.myChartValList[6] = data.data.censusMonthInfo[6].July.num
+              this.myChartValList[7] = data.data.censusMonthInfo[7].August.num
+              this.myChartValList[8] = data.data.censusMonthInfo[8].September.num
+              this.myChartValList[9] = data.data.censusMonthInfo[9].October.num
+              this.myChartValList[10] = data.data.censusMonthInfo[10].November.num
+              this.myChartValList[11] = data.data.censusMonthInfo[11].December.num
+            }
+            this.drawLine()
           }
         })
       }
+    },
+    beforeDestroy () {
+      window.removeEventListener('resize', () => {
+        this.myChart.resize()
+      })
     }
   }
 </script>
@@ -81,4 +177,36 @@
 .title{
   padding: 10px 0 ;
 }
+section{
+  /*border: solid 1px;*/
+}
+section section{
+  /*margin-left: 10px;*/
+  margin-top: 2px;
+  text-align: center;
+  width: 160px;
+  /*border-radius: 20px;*/
+  height: 25px;
+}
+.parent{
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  height: 60px;
+  width: 210px;
+}
+.parent section:first-child{
+  margin-top: -2px;
+  width: 60px;
+  height: 60px;
+}
+.my-label{
+  /*margin-top: 5px;*/
+}
+.my-img{
+  height: 60px;
+}
+b{
+  font-size: medium;
+}
 </style>

static/config/init.js

@@ -1,11 +1,11 @@
 /**
  * 动态加载初始资源
  */
-;(function() {
+;(function () {
   var resList = {
     icon: window.SITE_CONFIG.cdnUrl + '/static/img/logo.png',
     css: [
-      window.SITE_CONFIG.cdnUrl + '/static/css/app.css',
+      window.SITE_CONFIG.cdnUrl + '/static/css/app.css'
     ],
     js: [
       // 插件, 放置业务之前加载, 以免业务需求依赖插件时, 还未加载出错
@@ -24,53 +24,53 @@
 
   // 图标
   (function () {
-    var _icon = document.createElement('link');
-    _icon.setAttribute('rel', 'shortcut icon');
-    _icon.setAttribute('type', 'image/x-icon');
-    _icon.setAttribute('href', resList.icon);
-    document.getElementsByTagName('head')[0].appendChild(_icon);
+    var _icon = document.createElement('link')
+    _icon.setAttribute('rel', 'shortcut icon')
+    _icon.setAttribute('type', 'image/x-icon')
+    _icon.setAttribute('href', resList.icon)
+    document.getElementsByTagName('head')[0].appendChild(_icon)
   })();
 
   // 样式
   (function () {
-    document.getElementsByTagName('html')[0].style.opacity = 0;
-    var i = 0;
-    var _style = null;
+    document.getElementsByTagName('html')[0].style.opacity = 0
+    var i = 0
+    var _style = null
     var createStyles = function () {
       if (i >= resList.css.length) {
-        document.getElementsByTagName('html')[0].style.opacity = 1;
-        return;
+        document.getElementsByTagName('html')[0].style.opacity = 1
+        return
       }
-      _style = document.createElement('link');
-      _style.href = resList.css[i];
-      _style.setAttribute('rel', 'stylesheet');
+      _style = document.createElement('link')
+      _style.href = resList.css[i]
+      _style.setAttribute('rel', 'stylesheet')
       _style.onload = function () {
-        i++;
-        createStyles();
+        i++
+        createStyles()
       }
-      document.getElementsByTagName('head')[0].appendChild(_style);
+      document.getElementsByTagName('head')[0].appendChild(_style)
     }
-    createStyles();
-  })();
+    createStyles()
+  })()
 
   // 脚本
   document.onreadystatechange = function () {
     if (document.readyState === 'interactive') {
-      var i = 0;
-      var _script = null;
+      var i = 0
+      var _script = null
       var createScripts = function () {
         if (i >= resList.js.length) {
-          return;
+          return
         }
-        _script = document.createElement('script');
-        _script.src = resList.js[i];
+        _script = document.createElement('script')
+        _script.src = resList.js[i]
         _script.onload = function () {
-          i++;
-          createScripts();
+          i++
+          createScripts()
         }
-        document.getElementsByTagName('body')[0].appendChild(_script);
+        document.getElementsByTagName('body')[0].appendChild(_script)
       }
-      createScripts();
+      createScripts()
     }
-  };
-})();
+  }
+})()

yarn.lock

@@ -3299,6 +3299,14 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+echarts@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.3.2.tgz#0a7b3be8c48a48b2e7cb1b82121df0c208d42d2c"
+  integrity sha512-LWCt7ohOKdJqyiBJ0OGBmE9szLdfA9sGcsMEi+GGoc6+Xo75C+BkcT/6NNGRHAWtnQl2fNow05AQjznpap28TQ==
+  dependencies:
+    tslib "2.3.0"
+    zrender "5.3.1"
+
 editor@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/editor/download/editor-1.0.0.tgz#60c7f87bd62bcc6a894fa8ccd6afb7823a24f742"
@@ -11237,6 +11245,11 @@ tsconfig@^7.0.0:
     strip-bom "^3.0.0"
     strip-json-comments "^2.0.0"
 
+tslib@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
 tslib@^1.10.0:
   version "1.14.1"
   resolved "https://registry.nlark.com/tslib/download/tslib-1.14.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
@@ -12335,3 +12348,10 @@ yargs@~3.10.0:
     cliui "^2.1.0"
     decamelize "^1.0.0"
     window-size "0.1.0"
+
+zrender@5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
+  integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
+  dependencies:
+    tslib "2.3.0"