Echarts + VUE 实现折线图、饼图、柱状图和地图
折线图
- 组件定义
- 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
}]
}
饼图
- 组件定义
- 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']
}]
柱状图
- 组件定义
- 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']
}]
地图
- 组件定义
- 导入相关数据和图片
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 > 
${require('@/assets/landmark.png')}" > ` + params.data.name + ' ' + params.value[2] + '';
for (let i = 3; i < params.value.length; i++) {
str += '
' + params.value[i].mc + '：' + '' + params.value[i].tpfl + ' ' + params.value[i].dw + '';
}
str += '