f-loat / mpvue-echarts Goto Github PK

  <div class="container">
    <button @click="initChart">初始化</button>
    <div class="wrap">
      <mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" />
    </div>
  </div>
</template>

<script>
import * as echarts from '@/libs/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
export default {
  data () {
    return {
      option: null,
      echarts
    }
  },
  components: {
    mpvueEcharts
  },
  methods: {
    initChart () {
      this.option = {
        color: ['#37a2da', '#32c5e9', '#67e0e3'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['热度', '正面', '负面']
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 15,
          top: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              color: '#666'
            }
          }
        ],
        series: [
          {
            name: '热度',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: [300, 270, 340, 344, 300, 320, 310],
            itemStyle: {
              emphasis: {
                color: '#37a2da'
              }
            }
          },
          {
            name: '正面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true
              }
            },
            data: [120, 102, 141, 174, 190, 250, 220],
            itemStyle: {
              emphasis: {
                color: '#32c5e9'
              }
            }
          },
          {
            name: '负面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'left'
              }
            },
            data: [-20, -32, -21, -34, -90, -130, -110],
            itemStyle: {
              emphasis: {
                color: '#67e0e3'
              }
            }
          }
        ]
      }
      this.$refs.echarts.init()
    },
    handleInit (canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      })
      canvas.setChart(chart)
      chart.setOption(this.option)
      return chart
    }
  }，
mounted() {
  // Echart 实例 chart 何时能取到、 因为要调用实例的一些办法
}
}
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 300px;
}
</style>

<div class="echarts-wrap">
        <mpvue-echarts lazyLoad :echarts="echarts"  :onInit="handleInitChart" ref="echarts" canvasId="demo-canvas" />
      </div>
      <div class="echarts-bar">
        <mpvue-echarts lazyLoad :echarts="echarts"  :onInit="handleInitBarChart" ref="echartsBar" throttleTouch canvasId="canvas-bar" />
      </div>

initChartBar () {
       this.optionBar = {
         title: {
           text: 'TOP5 省份'
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
         xAxis: {
           type: 'category',
           data: this.topName
         },
         yAxis: {
           type: 'value',
           boundaryGap: [0, 0.01]
         },
         series: [
           {
             type: 'bar',
             label: {
               show: true,
               position: 'insideTop'
             },
             barWidth: 20,
             itemStyle: {
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0, 0, 0, 1,
                   [
                     {offset: 0, color: '#66a6ff'},
                     {offset: 1, color: '#89f7fe'}
                   ]
                 )
               }
             },
             data: this.topVal
           }
         ]
       }
       this.$refs.echartsBar.init()
     },
     initChart () {
       var mapName = 'china'
       var geoCoordMap = {}
       // chart.showLoading()
       var mapFeatures = echarts.getMap(mapName).geoJson.features
       // chart.hideLoading()
       mapFeatures.forEach(function (v) {
         // 地区名称o
         var name = v.properties.name
         // 地区经纬度
         geoCoordMap[name] = v.properties.cp
       })
       var convertData = function (data) {
         var res = []
         for (var i = 0; i < data.length; i++) {
           var geoCoord = geoCoordMap[data[i].name]
           if (geoCoord !== '') {
             res.push({
               name: data[i].name,
               value: geoCoord.concat(data[i].value)
             })
           }
         }
         return res
       }
       this.option = {
         visualMap: {
           show: true,
           min: 0,
           max: 300,
           left: 'left',
           top: 'bottom',
           text: ['高', '低'],
           calculable: true,
           seriesIndex: [1],
           inRange: {
             color: ['#89f7fe', '#66a6ff']
           }
         },
         geo: {
           show: true,
           map: mapName,
           label: {
             normal: {
               show: false
             },
             emphasis: {
               show: false
             }
           },
           roam: true,
           itemStyle: {
             normal: {
               areaColor: '#031525',
               borderColor: '#3B5077'
             },
             emphasis: {
               areaColor: '#2B91B7'
             }
           }
         },
         series: [{
           name: '散点',
           type: 'scatter',
           coordinateSystem: 'geo',
           data: convertData(this.map),
           symbolSize: function (val) {
             return val[2] / 10
           },
           label: {
             normal: {
               formatter: '{b}',
               position: 'right',
               show: true,
               color: '#f6d365'
             },
             emphasis: {
               show: true
             }
           },
           itemStyle: {
             normal: {
               color: 'blue'
             }
           }
         },
         {
           type: 'map',
           map: mapName,
           geoIndex: 0,
           aspectScale: 0.75,
           showLegendSymbol: false,
           label: {
             normal: {
               show: true
             },
             emphasis: {
               show: false,
               textStyle: {
                 color: '#fff'
               }
             }
           },
           roam: true,
           itemStyle: {
             normal: {
               areaColor: '#031525',
               borderColor: '#3B5077'
             },
             emphasis: {
               areaColor: '#2B91B7'
             }
           },
           animation: false,
           data: this.map
         }
         ]
       }
       this.$refs.echarts.init()
     },

import * as echarts from '../../echarts.min.js'
import mpvueEcharts from 'mpvue-echarts'

<template>
  <div class="container">
    <div class="chartMain">
      <div class="echarts-wrap">
        <mpvue-echarts lazyLoad @echarts="echarts"  @onInit="handleInitChart" disableTouch="true" ref="echarts" canvasId="demo-canvas" />
      </div>
      <div class="echarts-bar">
        <mpvue-echarts lazyLoad @echarts="echarts"  @onInit="handleInitBarChart" disableTouch="true" ref="echartsBar" canvasId="canvas-bar" />
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import mpvueEcharts from 'mpvue-echarts'
  require('echarts/map/js/china')
  let chart = null
  let chartBar = null
  export default {
    components: {
      mpvueEcharts
    },
    data () {
      return {
        echarts,
        option: null,
        optionBar: null,
        map: [],
        schoolName: '',
        pCount: 0,
        topName: [],
        topVal: [],
        locationCount: '',
        userCount: ''
      }
    },
    methods: {
      handleInitChart (canvas, width, height) {
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart)
        chart.setOption(this.option)
        return chart // 返回 chart 后可以自动绑定触摸操作
      },
      handleInitBarChart (canvas, width, height) {
        chartBar = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chartBar)
        chartBar.setOption(this.optionBar)
        return chartBar // 返回 chart 后可以自动绑定触摸操作
      },
      initChartBar () {
        this.optionBar = {
          title: {
            text: 'TOP5 省份',
            textStyle: {
              fontSize: 13
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.topName
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          series: [
            {
              type: 'bar',
              label: {
                show: true,
                position: 'insideTop'
              },
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#89f7fe'},
                      {offset: 1, color: '#66a6ff'}
                    ]
                  )
                }
              },
              data: this.topVal
            }
          ]
        }
        this.$refs.echartsBar.init()
      },
      convertData (data) {
        var mapName = 'china'
        var geoCoordMap = {}
        // chart.showLoading()
        var mapFeatures = echarts.getMap(mapName).geoJson.features
        // chart.hideLoading()
        mapFeatures.forEach(function (v) {
          // 地区名称o
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp
        })
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord !== '') {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return res
      },
      initChart () {
        var mapName = 'china'
        this.option = {
          visualMap: {
            show: true,
            min: 0,
            max: 300,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            seriesIndex: [1],
            inRange: {
              color: ['#89f7fe', '#66a6ff']
            }
          },
          geo: {
            show: true,
            map: mapName,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#FFFFFF',
                borderColor: '#BFBFBF'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            }
          },
          series: [{
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.map),
            symbolSize: function (val) {
              return val[2] / 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                color: '#FF6800',
                fontSize: 8
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#89f7fe'
              }
            }
          },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75,
            showLegendSymbol: false,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: this.map
          }
          ]
        }
        this.$refs.echarts.init()
      },
      getUniversityMap () {
        var val = wx.getStorageSync('university')
        var _this = this
        _this.topName = []
        _this.topVal = []
        wx.request({
          url: _this.GLOBAL.serverPath + '/api/user/getMapData',
          method: 'GET',
          data: {
            university: val
          },
          header: {
            'content-type': 'application/json'
          },
          success: function (res) {
            console.log(res)
            _this.map = res.data.data.list
            _this.pCount = res.data.data.list.length
            if (_this.pCount >= 5) {
              for (var i = 0; i < 5; i++) {
                _this.topName.push(_this.map[i].name)
                _this.topVal.push(_this.map[i].value)
              }
            } else {
              for (var j = 0; j < _this.pCount; j++) {
                _this.topName.push(_this.map[j].name)
                _this.topVal.push(_this.map[j].value)
              }
            }
            _this.initChart()
            _this.initChartBar()
            // _this.locationCity = res.data.data[1]
          }
        })
      },
    mounted () {
      this.getUniversityMap()
    }
  }
</script>

<style scoped>
  .school-name{
    color: #5687e7;
  }
  .city-count{
    color: #edb621;
  }
  .chartMain{
    display: flex;
    position: fixed;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /*background-image: linear-gradient( #66a6ff 0%, #89f7fe 100%);*/
    background-size: 100%;
  }
  .echarts-wrap {
    pointer-events: none;
    width: 100%;
    height: 500rpx;
  }
  .echarts-bar{
    pointer-events: none;
    width: 100%;
    height: 500rpx;
  }
  .title{
    margin-top: 20rpx;
    text-align: center;
    color: #5687e7;
  }
  .detail{
    text-align: center;
    font-size: 20rpx;
    color: #66a6ff;
  }
  .floatBtn{
    position: fixed;
    bottom: 45%;
    right: 10%;
    border-radius: 80rpx;
  }
  .shareBtn{
    color: #ffffff;
    font-size:18rpx;
    height:80rpx ;
    width: 80rpx;
    background-color: #5687e7;
    border-radius: 80rpx;
    box-shadow: 0 0 22rpx #2F330A;
    opacity: 0.7;
  }
</style>

this.ctx.draw(true, () => {
  wx.canvasToTempFilePath({
    canvasId,
    ...opt
  });
 });