vue使用echarts
HerayChen 人气:0全局安装echarts
npm i echarts --save
将echarts绑定在原型上(main.js文件中)
import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts;
准备画布
<template> <div ref="openingChart" style="height: 600px;"></div> </template>
<script> import china from "../store/china.json"; export default { methods: { initCharts() { // 初始化中国地图 this.$echarts.registerMap("china", china); // 获取dom节点 let openingChart= this.$echarts.init(this.$refs.openingChart); // option配置写在最下面的 openingChart.setOption(option); window.addEventListener("resize", () => { openingBankChart.resize(); }); } }, mounted() { this.initCharts(); } } </script>
地图配置option
option = { // 地图背景色 backgroundColor: "#ccd3e4", geo: { map: 'china', }, tooltip: { trigger: 'item', // 自定义提示框的内容 /** 这里自定义显示的值是data中value数组的第二个值 * formatter(params) { return ( "<div>" + params.data.name + " <br> " + "省份总额度:" + params.data.value[2] + "(万元)</div>" ); } */ }, series: [ { type: 'map', map: 'china', geoIndex: 1, showLegendSymbol: false, // 存在legend时显示 tooltip: { show: false }, label: { normal: { show: false }, emphasis: { show: false } }, roam: false, itemStyle: { normal: { areaColor: "#aaa", borderColor: "#ccd3e4", borderWidth: 1, }, emphasis: { areaColor: "#aaa", }, }, }, { name: '省份总额度', type: 'effectScatter', coordinateSystem: 'geo', data: [{ name: "深圳", value: [121.15, 31.89, 12], }, { name: "武汉", value: [109.781327, 39.608266, 29] }], symbolSize: 20, symbol: 'circle', label: { normal: { show: false, }, emphasis: { show: false, }, }, showEffectOn: "render", itemStyle: { normal: { color: { type: "radial", colorStops: [ { offset: 0, color: "#e5c68b", }, { offset: 0.8, color: "#6e96d4", }, { offset: 1, color: "#6e96d4", }, ], global: false, // 缺省为 false }, }, }, }, ] }
中国地图包(china.json)
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
加载全部内容