echarts使用示例

Vin0sen

已于 2025-03-25 14:33:38 修改

阅读量451

点赞数 2

CC 4.0 BY-SA版权

分类专栏：程序设计文章标签：前端

于 2024-11-27 20:57:09 首次发布

本文链接：https://blog.csdn.net/m0_52062236/article/details/144094349

程序设计专栏收录该内容

4 篇文章

订阅专栏

柱状图+折线图

折柱混合：https://echarts.apache.org/examples/zh/editor.html?c=mix-line-bar

在这里插入图片描述

option = {
  title:{show: true},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['60周岁及以上人口', '60周岁及以上人口比重']
  },
  xAxis: [
    {
      type: 'category',
      data: ['2019', '2020', '2021', '2022', '2023'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '万人',
      min: 22000,
      max: 30000,
      interval: 1000
    },
    {
      type: 'value',
      name: '%',
      min: 12,
      max: 25,
      interval: 1,
      splitLine:false
    }
  ],
  series: [
    {
      name: '60周岁及以上人口',
      type: 'bar',
      data: [25388, 26402, 26736, 28004, 29697],
      itemStyle : { normal: {label : {show: true}}},
      barWidth: '35%',
    },
    {
      name: '60周岁及以上人口比重',
      type: 'line',
      yAxisIndex: 1,
      data: [18.1, 18.7, 18.9, 19.8, 21.1],
      itemStyle : { normal: {label : {show: true}}},
    }
  ]
};

地图

香港18区人口密度（2011）

纯html页面可以直接导入 world.js，但是时间太久，我不记得之前在哪找的world.js了（需要修改world.js中的 echarts.registerMap(,) 地理json）

<head>
    <script src="js/echarts.min.js"></script>
    <script src="js/world.js"></script>
</head>
<body><div id="heatmap" class="charts"></div></body>

在Vue中的使用较为方便

<template>
  <div id="countryAnalysis">
    <div id="heatmap" class="charts"></div>
  </div>
</template>
<script>
import worldJson from '@/assets/world.json';

export default {
	methods: {
		handleCountry(){
			this.$echarts.registerMap("world", worldJson)
			var myChart = this.$echarts.init(document.getElementById('heatmap'));
			var option = {...}	// 去看 echarts 的地图示例的选项
    		myChart.setOption(option);
		}
	},
	mounted(){
    	this.handleCountry()
	}
}
</script>
<style>
.charts {  
    margin: 20px auto;  
    padding: 20px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
    height: 600px; width: 80%;
} 
</style>