vue+vuex+axios+echarts画1个动态更新的中华地图的法子

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
myCharts.js
/**
 * 各种画echarts图表的方法都封装在这里
 */
import echarts from 'echarts'
(function() {
  var chart = {};
  chart.install = function(vue) {
    vue.prototype.$chart = {
      //画一条简单的线
      line1: function(id) {
        this.chart = echarts.init(document.getElementById(id));
        this.chart.clear();
        const optionData = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }]
        };
        this.chart.setOption(optionData);
      },
    }
  }
  if(typeof exports == 'object') {
    module.exports = chart
  }
})()
hello.vue
...
<div id="chart1"></div>
...
mounted() {
  this.$chart.line1('chart1');
},

二. 按需引进

那时npm run dev已经得以看看中中原人民共和国地形图上闪闪的香艳小点点。

你可能感兴趣的篇章:

  • 运用Vue开辟动态刷新Echarts组件的科目详解
  • vue在选用ECharts时的异步更新和数据加载详解
  • 在vue中加多Echarts图表的主干使用教程
  • 在Vue中使用echarts的实例代码(叁种图)
  • vue.js+Echarts开辟图表放大裁减作用实例
  • Vue二 使用 Echarts
    创造图表实例代码
  • 详解Vue贰+Echarts完结八种图形数据可视化Dashboard(附源码)

2、使用vue-echarts

下一场再vue项目build目录下找到webpack.base.conf.js,配置文件,在module.exports对象中加多externals属性,然后配置echarts所在的渠道:

肆.设置开始化的空域地图,这里供给安装许多echarts参数,参谋ECharts配置项手册。

父组件传值给子组件

开发:

上篇文章给大家介绍了 在 webpack 中运用
ECharts的实例详解,能够点击查阅。

chinaMap.setOption({
  backgroundColor: '#272D3A',
  // 标题
  title: {
   text: '中国地图闪闪发光',
   left: 'center',
   textStyle: {
    color: '#fff'
   }
  },
  // 地图上圆点的提示
  tooltip: {
   trigger: 'item',
   formatter: function (params) {
    return params.name + ' : ' + params.value[2]
   }
  },
  // 图例按钮 点击可选择哪些不显示
  legend: {
   orient: 'vertical',
   left: 'left',
   top: 'bottom',
   data: ['地区热度', 'top5'],
   textStyle: {
    color: '#fff'
   }
  },
  // 地理坐标系组件
  geo: {
   map: 'china',
   label: {
    // true会显示城市名
    emphasis: {
     show: false
    }
   },
   itemStyle: {
    // 地图背景色
    normal: {
     areaColor: '#465471',
     borderColor: '#282F3C'
    },
    // 悬浮时
    emphasis: {
     areaColor: '#8796B4'
    }
   }
  },
  // 系列列表
  series: [
   {
    name: '地区热度',
    // 表的类型 这里是散点
    type: 'scatter',
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: 'geo',
    data: [],
    // 标记的大小
    symbolSize: 12,
    // 鼠标悬浮的时候在圆点上显示数值
    label: {
     normal: {
      show: false
     },
     emphasis: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: '#ddb926'
     },
     // 鼠标悬浮的时候圆点样式变化
     emphasis: {
      borderColor: '#fff',
      borderWidth: 1
     }
    }
   },
   {
    name: 'top5',
    // 表的类型 这里是散点
    type: 'effectScatter',
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: 'geo',
    data: [],
    // 标记的大小
    symbolSize: 12,
    showEffectOn: 'render',
    rippleEffect: {
     brushType: 'stroke'
    },
    hoverAnimation: true,
    label: {
     normal: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: '#f4e925',
      shadowBlur: 10,
      shadowColor: '#333'
     }
    },
    zlevel: 1
   }
  ]
 })

vue使用echarts制作圆环图,代码如下所示:

npm install echarts --save
  1. 直白引用
let lightData = paleData.sort((a, b) => {
  return b.value - a.value
}).slice(0 + state.showCount, state.showCityNumber + state.showCount)
if (state.isLoading) {
  chartsObj.hideLoading()
  commit('closeLoading')
}
<template>
  <div class="index-wrapper">
   <tittle :chartT="chart_tit"></tittle>
  </div>
</template>
<script type="text/ecmascript-6">
 import axios from 'axios'
 import Tittle from './applicationDetail/appTittle'
 export default {
  data(){
   return{
    chart_tit:{}
   }
  }
}
</script>

开发:

引入echarts模块

上述正是本文的全部内容,希望对大家的就学抱有扶助,也指望大家多多援助脚本之家。

总结

先npm安装echarts

npm install echarts--save
const actions = {
 fetchHeatChinaRealData ({state, commit}, chartsObj) {
  axios.get('static/data/heatChinaRealData.json')
   .then(
    (res) => {
     let data = res.data
     let paleData = ((state, data) => {
      let arr = []
      let len = data.length
      while (len--) {
       let geoCoord = state.geoCoordMap[data[len].name]
       if (geoCoord) {
        arr.push({
         name: data[len].name,
         value: geoCoord.concat(data[len].value)
        })
       }
      }
      return arr
     })(state, data)
     let lightData = paleData.sort((a, b) => {
      return b.value - a.value
     }).slice(0, state.showCityNumber)
     chartsObj.setOption({
      series: [
       {
        name: '地区热度',
        data: paleData
       },
       {
        name: 'top5',
        data: lightData
       }
      ]
     })
    }
   )
 }
}
<div id="main"></div>
<script type="text/ecmascript-6">
 export default {
  //从父组件中接收到的数据
  props:{
   chartT:{
    type:Object,
    required:true
   }
  },
  data () {
   return {
    charts: '',
    totalIncome:'',
    opinionData: [
     {value: Math.abs(this.chartT.imp_rate)},//取绝对值
     {value: 100}
    ]
   }
  },
  methods: {
   drawPie (id) {
    this.charts = this.$echarts.init(document.getElementById(id));
    this.charts.setOption({
     tooltip: {
      trigger: 'item',
      formatter: '{a}<br/>{b}:{c} ({d}%)'
     },
     legend: {
      orient: 'vertical',
      x: 'left',
      data: this.opinion
     },
     color:['#2872ef','#d6d6d6','#fc6e51'],
     series: [
      {
       name: '访问来源',
       type: 'pie',
       radius: ['90%', '65%'],
       avoidLabelOverlap: false,
       label: {
        normal: {
         show: false,
         position: 'center'
        },
        emphasis: {
         show: true,
         testStyle: {
          fontSize: '30',
          fontWeight: 'bold'
         }
        }
       },
       //根据数值判断颜色
//       itemStyle:{
//        normal:{
//         color:function(params){
//          console.log(params)
//          console.log(params.dataIndex)
//          console.log(params.data.value)
//          console.log(params.value)
//          if(params.value > 0){
//           return "#2872ef";
//          }else if(params.value[0] < 0 ){
//           return "#fc6e51";
//          }
//          return "#d6d6d6";
//         }
//        }
//       },
       labelLine: {
        normal: {
         show: false
        }
       },
       data: this.opinionData
      }
     ]
    })
   }
  },
  mounted () {
   this.$nextTick(function () {
    this.drawPie('main')
   })
  },
 }
</script>

main.js

注意:src中写入echarts的路径;

import Vue from 'vue'
import Index from './components/index.vue'
import store from './store/index'

let ChinaMap = new Vue({
 el: '#app',
 store,
 template: '<Index/>',
 components: {Index}
})

Vue.use(ChinaMap)

上述所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码,希望对大家具备协理,要是大家有其它疑问请给自家留言,我会及时过来我们的。在此也特别感激大家对台本之家网址的帮助!

总结

let echarts = require('echarts/lib/echarts')

澳门新萄京8522,四. 配置Vuex管理和分发数据

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('chart', ECharts)
hello.vue
...
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
...
data: function() {
  return {
    orgOptions: {},
  }
},
...
mounted() {
  this.orgOptions = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }]
  }
}

试行上边包车型地铁授命:

2.案例代码

先npm安装vue-echarts

地点全局引进会将有所的echarts图表打包,导致体量过大,小编解决这壹主题材料,能够采取require按需引进正是须要怎样就引进什么:

一.按供给引进与中华地图相关的Echarts图表和组件。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图