vue引入echarts
npm install echarts --save
main.js引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
划中国地图
引入中国地图数据
import 'echarts/map/js/china.js'
<template>
<div>
<div id="myChart"></div>
</div>
</template>
<script>
export default {
data() {
return {
mydata: []
}
},
mounted() {
this.drawLine()
},
methods:{
drawLine() {
this.mydata = [
{ name: '北京', value: '100' }, { name: '天津', value: this.randomData() },
{ name: '上海', value: this.randomData() }, { name: '重庆', value: this.randomData() },
{ name: '河北', value: this.randomData() }, { name: '河南', value: this.randomData() },
{ name: '云南', value: this.randomData() }, { name: '辽宁', value: this.randomData() }
// {name: '黑龙江',value: this.randomData() },{name: '湖南',value: this.randomData() },
// {name: '安徽',value: this.randomData() },{name: '山东',value: this.randomData() },
// {name: '新疆',value: this.randomData() },{name: '江苏',value: this.randomData() },
// {name: '浙江',value: this.randomData() },{name: '江西',value: this.randomData() },
// {name: '湖北',value: this.randomData() },{name: '广西',value: this.randomData() },
// {name: '甘肃',value: this.randomData() },{name: '山西',value: this.randomData() },
// {name: '内蒙古',value: this.randomData() },{name: '陕西',value: this.randomData() },
// {name: '吉林',value: this.randomData() },{name: '福建',value: this.randomData() },
// {name: '贵州',value: this.randomData() },{name: '广东',value: this.randomData() },
// {name: '青海',value: this.randomData() },{name: '西藏',value: this.randomData() },
// {name: '四川',value: this.randomData() },{name: '宁夏',value: this.randomData() },
// {name: '海南',value: this.randomData() },{name: '台湾',value: this.randomData() },
// {name: '香港',value: this.randomData() },{name: '澳门',value: this.randomData() }
]
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
backgroundColor: '#F7F7F7',
title: {
text: '中国地图',
subtext: '中国地图'
// sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} '
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center'
// // feature: {
// // dataView: {readOnly: false},
// // restore: {},
// // saveAsImage: {}
// // }
// },
visualMap: {
max: 500,
min: 0,
text: ['高', '低'],
realtime: false,
calculable: false,
itemHeight: '200',
inverse: true, // 翻转
orient: 'horizontal',
inRange: {
color: ['#DDDDDD', '#026FDD']
}
},
series: [
{
name: '损失统计',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
itemStyle: {
normal: { label: { show: true } },
emphasis: { label: { show: true } }
},
data: this.mydata
}
]
})
},
randomData() {
return Math.round(Math.random() * 500);
}
},
}
</script>
