【Echarts】中国地图、堆叠图、横向柱状图

最新推荐文章于 2023-12-19 17:08:28 发布
最新推荐文章于 2023-12-19 17:08:28 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： Echarts 文章标签： echarts javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53186633/article/details/126266541
版权

封装一个监听窗口变化，自适应图像大小的混入对象：

混入对象：一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

chart_resize.js文件：

export default {
	methods: {
		// 对echart元素尺寸进行监听，当发生变化时同步更新echart视图
		chartEleResizeListener() {
			const chartInstance = ResizeListener({
				strategy: 'scroll',
				callOnAdd: true
			})
			chartInstance.listenTo(this.$el, () => {
		        if (!this.chart) return
		        this.chart.resize()
		    })
		},
		// 当窗口缩放时，echart动态调整自身大小
		windowResizeListener() {
			if(!this.chart) return
			this.chart.resize()
		}
	},
	mounted() {
		window.addEventListener('resize', this.windowResizeListener)
		this.chartEleResizeListener()
	},
	beforeDestroy() {   // 组件销毁时取消监听
		window.removeEventListener('resize', this.windowResizeListener)
	}
}

中国地图

<template>
  <div ref="chart"/>
</template>
<script>
import chartResize from '../components/chart_resize'  //引入混入对象
export default {
  name: 'ChinaChart',
  mixins: [chartResize],   //使用自适应混入对象
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    this.setOptions()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      const chartDom = this.$refs.chart
      this.chart = this.$echarts.init(chartDom)
      const option = {
        height: '100%',
        width: '70%',
        visualMap: {
          min: 0,
          max: 100,
          top: 'bottom',
          seriesIndex: 1,
          text: ['高', '低'],
          inRange: {
            color: ['#CCDDFF', '#ADD8E6', '#BBFFEE', '#FFF0F5 ', '#F0E68C']
          },
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        geo: {
          show: true,
          map: 'china',
          label: {
            offset: [50, 10],
            normal: {
              show: true,
              fontSize: '12',
              color: 'rgba(0,0,0,0.7)'
            },
            emphasis: {
              color: '#000000',
              fontSize: 14,
              show: true
            }
          },
          roam: 'scale',
          scaleLimit: {
            min: 1,
            max: 15
          },
          zoom: 1,
          itemStyle: {
            normal: {
              areaColor: '#FFF',
              borderColor: '#27af6b'
            },
            emphasis: {
              areaColor: '#FFFF77'
            }
          }
        },
        series: [{
          name: '标记点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: this.dataCenter.datas,
          symbol: 'circle',
          symbolSize: 12,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              color: function(params) {
                if (params.data.dataStatus === 'health') {
                  return 'green'
                } else if (params.data.dataStatus === 'bad') {
                  return 'red'
                }
              }
            },
            emphasis: {
              color: '#f00'
            }
          },
          tooltip: {
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
              color: '#000',
              decoration: 'none'
            },
            backgroundColor: 'white',
            formatter: param => {
              return `<div style="${'padding: 10px;'}">
                        <span style="margin-right: 25px;">${param.data.dataCenter}</span>
                        <span>${param.data.city}</span>
                        <p style="line-height: 30px; margin: 0;">状态：${param.data.dataStatus}</p>
                      </div>`
            }
          }
        },
        {
          name: '省份',
          type: 'map',
          geoIndex: 0,
          data: this.chinaProvince.datas,
          tooltip: {
            padding: 0,
            enterable: true,
            transitionDuration: 1,
            textStyle: {
              color: '#000',
              decoration: 'none'
            },
            backgroundColor: 'white',
            formatter: param => {
              const spanStyle = 'display: block;'
              return `<div style="${'padding: 10px;'}">
                          <p style="${'font-size: 16px; font-weight: 600; line-height: 30px; margin: 0;'}">${param.name}</p>
                          <span style="${spanStyle}">总数：${param.data.alarm.total}</span>
                          <span style="${spanStyle}">紧急：${param.data.alarm.emergency}</span>
                          <span style="${spanStyle}">严重：${param.data.alarm.important}</span>
                          <span style="${spanStyle}">轻微：${param.data.alarm.slight}</span>
                      </div>`
            }
          }
        }]
      }
      this.chart.setOption(option)
      // this.$nextTick(() => {
      //   this.chart.resize()
      // })
    }
  }
}
</script>

堆叠图

<template>
  <div ref="chart" />
</template>
<script>
import chartResize from '../components/chart_resize'
export default {
  name: 'ChinaChart',
  mixins: [chartResize],
  data() {
    return {
      chart: null,
    }
  },
  created() {
    this.setOptions()
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      const chartDom = this.$refs.chart
      this.chart = this.$echarts.init(chartDom)
      var option = {
        color: ['#238353', '#27af6b', '#c7e9d8'],
        grid: {
          top: '10%',
          bottom: '10%',
          left: '3%',
          right: '3%'
        },
        xAxis: {
          type: 'category',
          data: this.allProvince,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '紧急',
            type: 'bar',
            barWidth: 20,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.emergency
          },
          {
            name: '重要',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.important
          },
          {
            name: '轻微',
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.slight
          },
          {
            name: '总计',
            type: 'bar',
            stack: '',
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#000'
              }
            },
            z: -1,
            barGap: '-100%',
            data: this.total,
            itemStyle: {
              normal: {
                color: 'rgba(128, 128, 128, 0)'
              }
            }
          }
        ]

      }
      this.chart.setOption(option)
    },
  }
}
</script>

横向柱状图（添加背景色效果）

<template>
  <div ref="bar_chart" :style="{ height: height, width:width}" />
</template>
<script>
import chartResize from './chart_resize'
export default {
  name: 'BarChart',
  mixins: [chartResize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
	  this.setOptions()
  },

  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      this.chart = this.$echarts.init(this.$refs.bar_chart)
      const option = Object.assign(
        {
          grid: {
            top: 0,
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: 'category',
            data: xAxisData,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              align: 'right',
              margin: 50
            }
          },
          series: [
            {
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              barWidth: 7,
              data: series.data,
              itemStyle: {
                normal: {
                  barBorderRadius: 30,
                  color: function(param) {
                  	const colorList = ['#6d0909e0', '#6d0909e0', '#6d0909e0']
                    return colorList[param.dataIndex]
                  }
                }
              },
              label: {
                show: true,
                position: [660, 0],   //将柱状图的label文字标记到柱状图最后面
                formatter(params) {
                  const { value } = params
                  return `${value}`
                },
                color: '#000'
              },
              zlevel: 1,
              // barGap: '-90%',
              // barCategoryGap: '-90%',
              showBackground: true,
              fontSize: '12px',
              backgroundStyle: {
                color: 'rgba(110, 193, 244, 0.2)'
              }
            },
            {
              name: '背景',   //添加背景颜色
              type: 'bar',
              barWidth: 7,
              barGap: '-100%',
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
              itemStyle: {
                normal: {
                  color: 'rgba(0,0,0,0.05)',
                  barBorderRadius: 30
                }
              }
            }
          ]
        },
        this.options
      )
      this.chart.setOption(option)
      this.$nextTick(() => {
        this.chart.resize()
      })
    }
  }
}
</script
星河梦~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts地图上绘制堆叠柱状图并切换地市
weixin_43412413的博客
03-02 3965
1、echarts地图上绘制堆叠柱状图 1、js import echarts from 'echarts' function initMap(myChart, region, geoCoordMap, rawData) { myChart.showLoading() // 市区坐标 let option = { tooltip: { show: true, trigger: 'item', // 是否设置让提示框的内容一直显示 默认.
echarts地图叠加百度地图底板实现数据可视化
最新发布
Bolin
04-26 1085
实现数据可视化时，个别情况下需要在地图上实现数据的可视化，echarts加载geojson数据可以实现以地图形式展示数据，例如分层设色或者鼠标hover展示指标值，但如果要将echarts地图和真实的地图底板叠加官方就没有相关的示例了。这里的讲的echarts地图与百度地图叠加指的是在百度地图之上叠加一个行政区域的色块填充多边形。实现思路：使用series-custom，让series-custom. coordinateSystem echarts坐标系与百度地图坐标系一致。// 百度地图缩放级别。
vue中Echarts实现伪3D地图
q_qman的博客
10-21 3692
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图： 2.代码 <template> <div ref="myEchart" class="map-echart"> </div> </template> <script> import echarts from 'echarts' export def
echarts 地图和柱状图结合（在地图上显示柱状图）
qq_36413409的博客
11-07 5832
如图，需求要做一个在地图上显示柱状图的echarts图，但是百度了半天，发现很少有人发这种例子。那我会根据我的需求把代码和注意事项发出来并解释。
解决echarts中地图重叠问题
觉醒法师的专栏
01-10 1万+
在使用Echarts开发项目时，困扰许久的地图重叠问题，无意间在echarts官方文档中找到了解决方案。 示例： 如上图，其代码如下： geo: { backgroundColor:'#232e67', map: 'china', roam: true, }, series: [ { backgroundColor:'#232e67', name: '用户分布', type: 'map', mapType: 'china', data: [] } ] 该写法会
堆叠图_echarts_柱状堆叠图_
09-29
前后端交互实现自定义堆叠柱状图，主要基于echarts实现
echarts横向堆叠柱状图.zip
10-11
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，设置隐藏一段方案
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
绘制3D Echarts地图 饼图 堆叠柱状图
Zaqenenen的博客
12-11 3017
绘制3D Echarts 目前在项目中遇到过的3D echarts为： 3D饼图(圆环图) 3D区域地图 3D堆叠柱状图。 先上效果，有更好方法的大佬求指教 1.echarts + echarts-gl => 绘制3D地图 npm install echarts npm install echarts-gl //配置项代码 , this.chartData为我导入的随州市json数据 echarts.registerMap('随州市', this.suiZhou,this.chartData);
使用 echarts.js 和echarts-auto-tooltip.js 实现2.5D 地图
qq_42913167的博客
12-19 844
使用 echarts.js 和echarts-auto-tooltip.js 实现2.5D 地图，弹出框自动轮播，地图大小自适应！
Echarts绘制地图柱状图
qqjuanqq的博客
11-02 3223
Echarts绘制地图叠加柱状图
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
仙魁XAN
07-28 8677
Vue开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。本节介绍，vue中添加echarts，然后在vue中简单使用，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。折线图、柱状图、、......
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法
vue使用echarts自定义地图
路人贾！
07-20 1702
vue使用echarts自定义地图
Vue环境下用ECharts绘制中国地图，并实现拖动、缩放与各省份自动轮播高亮显示
m0_70647221的博客
05-10 1726
}, { name: “福建”, value: 20, }, { name: “贵州”, value: 74, }, { name: “广东”, value: 47, }, { name: “青海”, value: 45, }, { name: “西藏”, value: 41, }, { name: “四川”, value: 3, }, { name: “宁夏”, value: 7, }, { name: “海南”, value: 7, }, { name: “台湾”, value: 200, }, { n
Echarts + VUE 实现折线图、饼图、柱状图和地图
小金刚的博客
03-08 482
【代码】Echarts + VUE 实现折线图、饼图、柱状图和地图。
Echarts极坐标系下的堆叠柱状图
weixin_43166729的博客
10-10 2110
Echarts极坐标系下的堆叠柱状图 <template> <div> <p class="trave_title">{{ title }}</p> <div :style="'width: 100%;' + 'height:' + height + ';'" :id="id"></div> </div> </template> <script> import * as ec
echarts堆叠柱状图横向
10-18
您可以使用 echarts 中的柱状图（bar）和堆叠（stack）属性来实现横向的堆叠柱状图。具体实现步骤如下： 1. 在 option 中设置 xAxis 和 yAxis 的 type 为 value，同时设置 xAxis 的 position 为 top，yAxis 的 position 为 left，这样就可以实现横向的柱状图。 2. 在 series 中设置 type 为 bar，同时设置 stack 属性为堆叠的组名，这样就可以实现堆叠柱状图。 3. 如果需要设置柱状图的颜色，可以在 series 中设置 itemStyle.normal.color 属性。 下面是一个简单的示例代码： ``` option = { xAxis: { type: 'value', position: 'top' }, yAxis: { type: 'category', data: ['A', 'B', 'C'] }, series: [ { name: 'Series 1', type: 'bar', stack: 'Stack 1', itemStyle: { normal: { color: '#FFA07A' } }, data: [10, 20, 30] }, { name: 'Series 2', type: 'bar', stack: 'Stack 1', itemStyle: { normal: { color: '#87CEFA' } }, data: [20, 30, 40] } ] }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值