在vue中使用echarts绘制图表
npm install echarts --save // 全局安装echarts
具体代码及注释如下 ：
<template>
<div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="map" :style="{width: '700px', height: '500px'}"></div>
</div>
</template>
<script>
import echarts from 'echarts'
// 引入中国地图数据
import china from 'echarts/map/json/china.json'
// 注册地图
echarts.registerMap('china', china)
export default {
data() {
return {}
},
mounted() {
this.map()
},
methods: {
map() {
// 基于准备好的dom，初始化echarts实例
let map = this.$el.querySelector('#map')
function resizeMyChart() {
map.style.width = (document.body.offsetWidth / 2) + 'px'//页面一半的大小
}
resizeMyChart();
// 绘制地图
