vue中echart"/>
vue中echart
1. 安装
npm install echarts
npm install echarts-gl
2. vue组件
html部分
<template><section class="chartapp"><div class="map-chart" ref="mapChart"></div></section>
</template>
JS引入
import * as Echarts from 'echarts'
import 'echarts-gl'
import shanghai from 'shanghai.json'
核心方法
mounted () {this.initChart()
},
methods: {initChart () {const vue = thislet myChart = Echarts.init(this.$refs.mapChart)myChart.onresize = myChart.resizeEcharts.registerMap('shanghai', shanghai)const options = {series:{name: 'shanghai',type: 'map3D',map: shanghai,aspectScale: 0.9,selectedMode: false,shading: 'realistic'// 后面添加各个属性OBJ}}myChart.setOption(options)}
}
地图初显效果
添加描边
const itemStyle = {opacity: 1,borderWidth: 2,borderColor: '#01CAF8',shadowColor: 'red'}
添加区域图片纹理
const realisticMaterial = {detailTexture: '/1.png',textureTiling: 1, // 纹理平铺,1是拉伸,数字表示纹理平铺次数roughness: 1, // 材质粗糙度,0完全光滑,1完全粗糙metalness: 0, // 0材质是非金属 ,1金属roughnessAdjust: 0}
添加区域鼠标移入效果
const emphasis = {label: {show: true,color: '#FFF',fontSize: 20},itemStyle: {borderColor: '#41EB26',borderWidth: 5,color: '#41EB26' }}
添加地级市的标签
const label = {show: true,formatter: (params) => {name = params.data.nameif (params.data.alias) name = params.data.aliasreturn name},textStyle: {backgroundColor: 'transparent',color: '#FFF',fontSize: '20',padding: 0}}
此时效果图
颜色有点暗对,添加光线(intensity:环境光强度,值越大,越亮)
const light = {main: {color: '#fff',intensity: 1,shadow: false,shadowQuality: 'high',alpha: 8,beta: 80},ambient: {color: '#fff', intensity: 1}}
后续
点击事件(可用)
myChart.off('click')myChart.on('click', function (params) {})
3. 总结
很对人遇到myChart.off(‘click’)不生效,是因为,你地图在geo上面的。series这儿就没问题了。
更多推荐
vue中echart
发布评论