|
|
@@ -0,0 +1,183 @@
|
|
|
+<template>
|
|
|
+ <div id="myChartChina" ref="myEchart" :style="{height:height,width:width}" @contextmenu.prevent="rightClick()"/>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 引入 merge
|
|
|
+import { merge } from 'lodash';
|
|
|
+// 按需引入 引入 ECharts 主模块
|
|
|
+// import echarts from 'echarts/lib/echarts'
|
|
|
+import * as echarts from 'echarts/lib/echarts'
|
|
|
+
|
|
|
+import './js/china.js'
|
|
|
+// 引入 resize
|
|
|
+import resize from './mixins/resize'
|
|
|
+
|
|
|
+const defaultOptions = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+
|
|
|
+ ifbox:false,
|
|
|
+ TipsList:[],
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ // type: 'scroll',
|
|
|
+ // icon: 'circle',
|
|
|
+ // orient: "vertical",
|
|
|
+ // left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ // radius: ['35%', '60%'], // 内外半径
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: [],
|
|
|
+ animationEasing: 'cubicInOut',
|
|
|
+ animationDuration: 2600
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ mixins: [resize],
|
|
|
+ props: {
|
|
|
+ options: {
|
|
|
+ type: Object,
|
|
|
+ default: function() {
|
|
|
+ return defaultOptions
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ width: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ },
|
|
|
+ height: {
|
|
|
+ type: String,
|
|
|
+ default: '100%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chart: null,
|
|
|
+ mapType:'china',
|
|
|
+ cityArr:[
|
|
|
+ ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林','黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东','河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'],
|
|
|
+ ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan']
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initChart()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ if (!this.chart) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.chart.dispose()
|
|
|
+ this.chart = null
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ options(newVal){
|
|
|
+ // console.log(newVal)
|
|
|
+ // this.options.geo.map=this.mapType
|
|
|
+ this.initChart()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 初始化echart视图
|
|
|
+ */
|
|
|
+ initChart() {
|
|
|
+
|
|
|
+ var that=this;
|
|
|
+
|
|
|
+ // console.log(this.options)
|
|
|
+ let myChartMap = echarts.init(document.getElementById('myChartChina'));
|
|
|
+ // organizationQueryWithPage().then(data=>{
|
|
|
+ // var dataObj = {}
|
|
|
+ // data.result.records.map(v=>{
|
|
|
+ // dataObj = {
|
|
|
+ // name:v.name,
|
|
|
+ // value:[Number(v.longitude),Number(v.latitude),v.id],
|
|
|
+ // }
|
|
|
+ // this.optionMap.series[0].data.push(dataObj);
|
|
|
+ // })
|
|
|
+ // this.optionMap.series[0].data = JSON.parse(JSON.stringify(this.optionMap.series[0].data))
|
|
|
+ // window.addEventListener("resize",()=> {
|
|
|
+ // myChartMap.resize();
|
|
|
+ // });
|
|
|
+ // myChartMap.setOption(this.optionMap);
|
|
|
+ // })
|
|
|
+
|
|
|
+ myChartMap.setOption(this.options);
|
|
|
+ window.addEventListener("resize",()=> {
|
|
|
+ myChartMap.resize();
|
|
|
+ });
|
|
|
+
|
|
|
+ // let myChartChina = echarts.init(document.getElementById('myChartChina')) //这里是为了获得容器所在位置
|
|
|
+ // echarts.use([ VisualMapComponent, GeoComponent,EffectScatterChart])
|
|
|
+
|
|
|
+ // myChartChina.setOption(this.option)
|
|
|
+ // console.log('渲染后得options===',myChartChina.setOption(this.option))
|
|
|
+ // //echarts自适应
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ showCity(zhName, pyName){
|
|
|
+ var that=this;
|
|
|
+ // console.log(zhName, pyName);
|
|
|
+ let myChartChina = this.$echarts.init(document.getElementById('myChartChina')) //这里是为了获得容器所在位置
|
|
|
+ // that.loadBdScript('./node_modules/echarts/map/js/province/'+pyName+'.js', function(){
|
|
|
+ // 设定中文省份名才能显示相关省份，之后想要设置什么数据，直接设置到option这里就可以了
|
|
|
+ that.options.geo.map=zhName;
|
|
|
+ that.mapType=zhName
|
|
|
+ // 深拷贝，另建option以免丢失原始option数据
|
|
|
+ var cityOption = JSON.parse(JSON.stringify(that.options));
|
|
|
+ // cityOption.series[0].data=[{
|
|
|
+ // name: '梅州市',
|
|
|
+ // value: [100, 100]
|
|
|
+ // }, {
|
|
|
+ // name: '深圳市',
|
|
|
+ // value: [100, 200]
|
|
|
+ // }]
|
|
|
+ myChartChina.setOption(cityOption);
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ loadBdScript(url, callback) {
|
|
|
+ // console.log(url)
|
|
|
+ var script = document.createElement("script")
|
|
|
+ script.type = "text/javascript";
|
|
|
+ if (script.readyState){ //IE
|
|
|
+ script.onreadystatechange = function(){
|
|
|
+ if (script.readyState == "loaded" || script.readyState == "complete"){
|
|
|
+ script.onreadystatechange = null;
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ } else { //Others
|
|
|
+ script.onload = function(){
|
|
|
+ callback();
|
|
|
+ };
|
|
|
+ }
|
|
|
+ script.src = url;
|
|
|
+
|
|
|
+ document.getElementsByTagName("head")[0].appendChild(script);
|
|
|
+ },
|
|
|
+ rightClick(){
|
|
|
+ var that=this;
|
|
|
+ let myChartChina = this.$echarts.init(document.getElementById('myChartChina')) //这里是为了获得容器所在位置
|
|
|
+ that.options.geo.map='china';
|
|
|
+ that.mapType='china'
|
|
|
+ var cityOption = JSON.parse(JSON.stringify(that.options));
|
|
|
+ myChartChina.setOption(cityOption);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
tongshanglei