gaochun_museum/src/configue/myCharts.js

/**
 * 各种画echarts图表的方法都封装在这里
 * 注意：这里echarts没有采用按需引入的方式，只是为了方便学习
 */

import echarts from 'echarts'
const install = function (Vue) {
  Object.defineProperties(Vue.prototype, {
    $chart: {
      get () {
        return {
          // 统计分析
          line1: function (id, header, data) {
            this.chart = echarts.init(document.getElementById(id))
            this.chart.clear()

            const optionData = {
              xAxis: {
                type: 'category',
                data: header
              },
              yAxis: {
                type: 'value'
              },
              series: [{
                data: data,
                type: 'line',
                smooth: true
              }]
            }

            this.chart.setOption(optionData)
          },
          // 访问人数
          pie: function (id, data) {
            this.chart = echarts.init(document.getElementById(id))
            this.chart.clear()
            var fontColor = '#000'

            const optionData = {
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                x: 'left',
                y: '15',
                textStyle: {
                  color: fontColor
                },
                data: data.header
              },
              series: [
                {
                  type: 'pie',
                  radius: ['55%', '70%'],
                  center: data.center || ['70%', '60%'],
                  color: data.color || ['#67c241', '#e6a139', '#f76b6c'],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold',
                        color: '#000'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data: data.data
                }
              ]
            }

            this.chart.setOption(optionData, true)
          },
          // 文物趋势
          line2: function (id, header, data) {
            this.chart = echarts.init(document.getElementById(id))
            this.chart.clear()
            var fontColor = '#000'
            var borderColor = 'rgba(0,0,0,0.1)'
            const optionData = {
              grid: {
                left: '5%',
                right: '8%',
                top: '18%',
                bottom: '5%',
                containLabel: true
              },
              tooltip: {
                show: true,
                trigger: 'item'
              },
              legend: {
                show: true,
                x: '200',
                y: '22',
                icon: 'stack',
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                  color: fontColor
                },
                data: ['全部', '青铜', '瓷器', '陶器']
              },
              xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  color: fontColor
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: borderColor
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: borderColor
                  }
                },
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
              }],
              yAxis: [{
                type: 'value',
                axisLabel: {
                  formatter: '{value}',
                  textStyle: {
                    color: fontColor
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: borderColor
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: borderColor
                  }
                }
              }],
              series: [
                {
                  name: '青铜',
                  type: 'line',
                  stack: '总量',
                  symbol: 'rect',
                  symbolSize: 9,
                  itemStyle: {
                    normal: {
                      color: '#67c241',
                      lineStyle: {
                        color: '#67c241',
                        width: 1
                      }
                    }
                  },
                  data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
                },
                {
                  name: '瓷器',
                  type: 'line',
                  stack: '总量',
                  symbol: 'rect',
                  symbolSize: 9,
                  itemStyle: {
                    normal: {
                      color: '#e6a139',
                      lineStyle: {
                        color: '#e6a139',
                        width: 1
                      }
                    }
                  },
                  data: [150, 22, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190]
                },
                {
                  name: '陶器',
                  type: 'line',
                  stack: '总量',
                  symbol: 'rect',
                  symbolSize: 9,
                  itemStyle: {
                    normal: {
                      color: '#f76b6c',
                      lineStyle: {
                        color: '#f76b6c',
                        width: 1
                      }
                    }
                  },
                  data: [0, 182, 191, 234, 0, 330, 10, 201, 154, 190, 330, 410]
                },
                {
                  name: '全部',
                  type: 'line',
                  stack: '总量',
                  symbol: 'rect',
                  symbolSize: 9,
                  itemStyle: {
                    normal: {
                      color: '#000',
                      lineStyle: {
                        color: '#000',
                        width: 1
                      }
                    }
                  },
                  markPoint: {
                    itemStyle: {
                      normal: {
                        color: 'red'
                      }
                    }
                  },
                  data: [120, 120, 301, 134, 390, 630, 810, 120, 491, 120, 290, 330]
                }
              ]
            }
            this.chart.setOption(optionData)
          }
        }
      }
    }
  })
}

export default {
  install
}