前端项目用的vue,步骤
npm install echarts --save
mian.js
// 全局引入的方式
import Echarts from 'echarts'
Vue.prototype.$echarts = Echarts
// 按需引入
// 例: 引入折线图等组件
require('echarts/lib/chart/line')
require('echarts/lib/chart/bar')
require('echarts/lib/chart/radar')
以定义一个map组件为例
<template>
<div class="map-box">
<div id="echartMap" :style="{width: '100%', height: '100%'}"/>
</div>
</template>
<script>
import { Promise } from 'q'
export default {
name: 'MapChart',
model: [],
props: {
mapData: { type: Object, default: () => ({}) }
},
data() {
return {
maxColor: 0,
minColor: 0,
city: {
name: 'zhejiang',
mapType: '浙江'
}
}
},
watch: {
mapData() {
this.$nextTick(() => {
if (this.mapData) {
this.drawMap()
}
})
}
},
mounted() {
this.drawMap()
},
methods: {
// 数据格式处理
formatData(obj) {
const arr = []
for (const i in obj) {
const o = {}
o.name = i
o.value = obj[i]
arr.push(o)
}
return arr
},
// 绘制省级地图
drawMap() {
const self = this
Promise.all(import(`echarts/map/js/province/${self.city.name}`)) //如此按需求引入指定的省份的地图文件
const chartMap = self.$echarts.init(document.getElementById('echartMap'))
const temp_data = self.formatData(self.mapData)
const mapType = self.city.mapType
if (temp_data.length > 0) {
self.maxColor = Math.max.apply(Math,
temp_data.map(function(o) {
return o.value
})
)
self.minColor = Math.min.apply(Math,
temp_data.map(function(o) {
return o.value
})
)
}
const option = {
backgroundColor: '',
title: {
text: '全省数据资源接入范围概况',
textStyle: { color: '#47AA8E' },
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}:{c}个数据集'
},
visualMap: {
min: self.minColor,
max: self.maxColor,
textStyle: { color: '#ffffff' },
realtime: true,
calculable: true,
inRange: {
color: ['lightgreen', 'yellow', 'purple', 'orangered']
}
},
series: [
{
type: 'map',
mapType: mapType,
itemStyle: {
normal: { label: { show: true }},
emphasis: { label: { show: true }}
},
data: self.formatData(self.mapData)
}
]
}
chartMap.setOption(option)
window.addEventListener('resize', function() {
chartMap.resize()
})
}
}
}
</script>
<style scoped>
.map-box{
width: 100%;
height: 400px;
}
</style>