Echarts + VUE 实现折线图、饼图、柱状图和地图

折线图

• 组件定义

<div
  ref="zxtChart"
  style="width: 100%;height: 50%;"
/>

• js

const dom = this.$refs.zxtChart;
this.zxtChart = this.$echarts.init(dom);
this.zxtChart.setOption(this.zxtOption);

• option参数设置

{
	// 标题
	title: {
		text: '组织碳月度排放',
		top: '0%',
		left: 'left'
	},
	// 提示工具
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'cross',
			label: {
				backgroundColor: '#6a7985'
			}
		},
		valueFormatter: (value) = >value + ' kgCO2'
	},
	// 整个图的缩进
	grid: {
		top: '35px',
		left: '33px',
		right: '25px',
		bottom: '0',
		containLabel: true
	},
	// x轴
	xAxis: {
		type: 'category',
		axisTick: {
			show: false
		},
		data: ['1', '2']
	},
	// y轴
	yAxis: {
		type: 'value',
		axisLine: {
			show: true
		},
		min: 0,
		max(value) { // 取最大值向上取整为最大刻度
			return (Math.ceil(value.max) * 1.1).toFixed(2);
		}
	},
	// 
	series: [{
		data: ['123', '872'] type: 'line',
		label: {
			show: true,
			position: 'top'
		},
		smooth: true
	}]
}

饼图

• 组件定义

<div
  ref="btChart"
  class="echart"
/>

• js

const dom = this.$refs.btChart;
this.btChart = this.$echarts.init(dom);
this.btChart.setOption(this.btOption);

• option参数设置

color: ['#ff844d', '#1f96ff', '#5b76f9', '#4dd8f8', '#49d58b', '#ffbb00', '#ff5e00'],
tooltip: {
	trigger: 'item',
	valueFormatter: (value) = >value + ' kgCO2'
},
// toolbox: {
//   feature: {
//     saveAsImage: {}
//   }
// },
legend: {
	// 图例
	data: ['图例1','图例2'],
	left: '75%',
	top: '20%',
	orient: 'vertical'
},
title: {
	// 设置饼图标题，位置设为顶部居中
	text: '排放形式碳排放情况',
	top: '0%',
	left: 'center'
},
series: [{
	type: 'pie',
	label: {
		show: false
	},
	itemStyle: {
		borderRadius: 5,
		borderColor: '#fff',
		borderWidth: 2
	},
	emphasis: {
		label: {
			show: false,
			fontSize: '15',
			fontWeight: 'bold',
			scaleSize: 15
		}
	},
	radius: ['30%', '60%'],
	data: ['23','56']
}]

柱状图

• 组件定义

<div
  ref="zztfChart"
  class="echart"
/>

• js

const dom = this.$refs.zztfChart;
this.zztfChart = this.$echarts.init(dom);
this.zztfChart.setOption(this.zztOption);

• option参数设置

tooltip: {
	trigger: 'axis',
	axisPointer: {
		type: 'shadow'
	},
	valueFormatter: (value) = >value + ' 分'
},
// toolbox: {
//   feature: {
//     saveAsImage: {}
//   }
// },
legend: {},
grid: {
	left: '5%',
	right: '2%',
	bottom: '0%',
	containLabel: true
},
yAxis: [{
	type: 'value',
	name: '排放量数据评分',
	boundaryGap: [0, 0.01]
}],
xAxis: {
	type: 'category',
	data: ['北京','上海']
},

series: [
// {
//   name: '温室气体排放量',
//   type: 'bar',
//   yAxisIndex: 0,
//   data: this.zlpfWsqtpfl
//   // data: [4034.4604, 4437.9064, 3994.1157, 4125.4604, 4004.4664, 3934.4804, 4124.3604, 4000.1604, 4056.6504, 4324.2304, 3994.9904, 4065.4656, 4087.9804, 4121.6548, 4321.5485, 4125.4214, 4034.2544]
// },
{
	name: '排放量数据评分',
	type: 'bar',
	yAxisIndex: 0,
	itemStyle: {
		color: '#329DFF',
		borderRadius: 5
	},
	label: {
		show: true,
		position: 'top',
		valueAnimation: true
	},
	showBackground: true,
	backgroundStyle: {
		color: 'rgba(180, 180, 180, 0.2)'
	},
	barWidth: '50%',
	data: ['234','162']
}]

地图

• 组件定义

<div
  ref="chain"
  style="width: 100%;height: 100%; background-color: #daeffa;"
/>

• 导入相关数据和图片

import chain from '@/assets/chain.json';
import landmark from '@/assets/landmark.png';

DataV.GeoAtlas地理小工具系列 (aliyun.com)可以下载中国地图json

• js

const convertData = [{
	"name": "辛集市",
	"value": [115.224451, 37.949309, 275.48, {
		"ssqy": "辛集市",
		"xcoordinate": 115.224451,
		"ycoordinate": 37.949309,
		"mc": "呼和浩特",
		"tpfl": 275.48,
		"dw": "kgCO2e"
	}]
},
{
	"name": "河东区",
	"value": [117.258413, 39.134487, 7739.32, {
		"ssqy": "河东区",
		"xcoordinate": 117.258413,
		"ycoordinate": 39.134487,
		"mc": "呼市",
		"tpfl": 3869.66,
		"dw": "kgCO2e"
	},
	{
		"ssqy": "河东区",
		"xcoordinate": 117.258413,
		"ycoordinate": 39.134487,
		"mc": "中海宏洋地产 (银川) 有限公司",
		"tpfl": 3869.66,
		"dw": "kgCO2e"
	}]
},
{
	"name": "西城区",
	"value": [116.372514, 39.918124, 12333.4, {
		"ssqy": "西城区",
		"xcoordinate": 116.372514,
		"ycoordinate": 39.918124,
		"mc": "中海宏洋地产 (深圳) 有限公司",
		"tpfl": 12333.4,
		"dw": "kgCO2e"
	}]
}];
this.chain = this.$echarts.init(this.$refs.chain);
this.$echarts.registerMap('chain', chain);
this.chain.setOption(this.mapOption);

• option参数设置

{
	geo: {
		center: [104, 34],// 地图初始化位置
		type: 'map',// 类型
		map: 'chain',
		top: '5%',// 距离顶部
		bottom: '5%',// 距离底部
		itemStyle: { // 地图区域的样式。
			areaColor: '#ffffff',// 地图整体区域的颜色
			borderColor: '#a4a5c8' // 地图边界线的颜色
		},
		zoom: 1.1,// 地图放大
		aspectScale: 0.8,// 地图宽高比例
		roam: true,// 地图缩放、平移
		scaleLimit: {
			min: 1,// 缩放最小大小
			max: 4 // 缩放最大大小
		}
	},
	// 自定义提示框的内容
	tooltip: {
		trrigger: 'item',
		// triggerOn: 'click',
		// 自定义提示框的内容
		formatter(params) {
			let str = ` < div > <img style = "width: 15px;height: 15px"src = "${require('@/assets/landmark.png')}" > <span style = "font-size: 20px;font-weight:bold;color:#1672ab" > ` + params.data.name + ' ' + params.value[2] + '</span>';
			for (let i = 3; i < params.value.length; i++) {
				str += ' <br><span style="margin-left:15px;font-size: 17px;color:#1672ab">' + params.value[i].mc + '：' + '</span><span style="font-size: 17px;float: right;color:#1672ab">' + params.value[i].tpfl + ' ' + params.value[i].dw + '</span>';
			}
			str += '</div>';
			return str;
		},
		borderColor: '#d3e6eb'
	},
	// 散点图
	series: [{
		type: 'scatter',// 特效散点图
		rippleEffect: { // 涟漪效果
			scale: 5,
			brushType: 'stroke'
		},
		coordinateSystem: 'geo',// 使用坐标
		label: {
			fontSize: 15,
			formatter(params) {
				console.log(params);
				return params.name + ' ' + params.value[2];
			},
			position: 'right',
			show: true
		},
		symbol: 'image://' + landmark,
		symbolSize: 20,
		data: convertData
	}]
}