课程名称：Vue + EChart 4.0 从0到1打造商业级数据报表项目
课程章节：利用v-charts重构地图 / 初识水球图
课程讲师： Sam
课程内容：
使用v-charts 重构地图
BMap2.vue
// 修改vcharts.js
import Vue from 'vue'
import VCharts from 'v-charts'
import 'v-charts/lib/style.css'
// 简单的应用
<template>
<div>
<ve-map :data='chartDate' height='800'></ve-map>
</div>
</template>
<script>
export default {
data(){
chartData:{
columns:['位置','税收'],
rows:[
{
'位置':'上海',
'税收':'123'
},
{
'位置':'上海',
'税收':'123'
},
{
'位置':'上海',
'税收':'123'
}
]
}
}
}
</script>
<template>
<div>
<ve-bmap :settings='chartSettings' height="100%" :title="title" :tooltip="tooltip" :series='series'></ve-bmap>
</div>
</template>
<script>
export default {
data(){
tooltip:{},
series:[
{
name:'',
type:'scatter',
coordinateSystem:'bmap',
data:testPoint,
encode:{
value:2
},
itemStyle:{
color:"purple"
},
symbolSize:function(val){
return val[2]/10
},
label:{
show:false,
position:'right',
formatter:function(v){
return `${v.data.name} - ${v.data.value[2]}`
}
},
emphasis:{
label:{
show:ture
}
}
},
{
name: 'Top 10',
type: 'effectScatter', //添加阴影
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value
}), geo).slice(0, 10),
symbolSize: function (val) {
return val[2] / 10
},
encode: {
value: 2
},
label: {
formatter: function (v) {
return `${v.data.name} - ${v.data.value[2]}`
},
position: 'right',
show: true
},
hoverAnimation: true, // hover动画
rippleEffect: { //
brushType: 'stroke' // 修改波纹线
},
itemStyle: {
color: 'purple',
shadowBlur: 10, // 增加阴影
shadowColor: '#333' // 阴影的颜色
}
}
],
title:{
text: '慕课外卖销售数据大盘',
subtext: '销售趋势统计',
sublink: 'https://www.imooc.com',
left: 'center'
},
chartSettings:{
key:'',
bmap:{
center: [104.114129, 37.550339], // 中心点的位置
zoom: 5,// 缩放比例
roam: false, // 是否允许缩放
mapStyle: {
styleJson: [{ // 自定义主题
'featureType': 'water',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'land',
'elementType': 'all',
'stylers': {
'color': '#f3f3f3'
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway',
'elementType': 'all',
'stylers': {
'color': '#fdfdfd'
}
}, {
'featureType': 'highway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'arterial',
'elementType': 'geometry.fill',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'poi',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'all',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'local',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'boundary',
'elementType': 'all',
'stylers': {
'color': '#fefefe'
}
}, {
'featureType': 'building',
'elementType': 'all',
'stylers': {
'color': '#d1d1d1'
}
}, {
'featureType': 'label',
'elementType': 'labels.text.fill',
'stylers': {
'color': '#999999'
}
}]
},
}
}
}
}
</script>
初始水球图
// npm i echarts-liquidfill -S // 安装水球图
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3], // 设置三条波纹的透明度
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3],
color: ['red', '#0f0', 'rgb(0, 0, 255)'],
itemStyle: { // 设置波纹的透明的
opacity: 0.6
},
emphasis: { // 设置波纹选中的透明的
itemStyle: {
opacity: 0.9
}
}
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, { // 单独的对第三个进行设置
value: 0.3,
itemStyle: {
color: 'red',
opacity: 0.6
},
emphasis: {
itemStyle: {
opacity: 0.9
}
}
}]
}]
};
var option = {
series: [{
type: 'liquidFill',
waveAnimation: false,
animationDuration: 0,
animationDurationUpdate: 0, // 设置波纹静止状态
data: [0.6, 0.5, 0.4, 0.3]
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
amplitude: 0, // 波纹的振幅大小
waveAnimation: 0
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.6, {
value: 0.5,
direction: 'left', // 对单个的方向进行设置默认是从左到右的
itemStyle: {
color: 'red'
}
}, 0.4, 0.3]
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
backgroundStyle: { // 设置水球图的背景的颜色边框
borderWidth: 5,
borderColor: 'red',
color: 'yellow'
}
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
outline: { // 设置最外层的边框
show: false
}
}]
};
var options = [{
series: [{
type: 'liquidFill', //
data: [0.6, 0.5, 0.4, 0.3],
shape: 'diamond' // 设置水球图的形状
}]
}];
option = {
series: [{
type: 'liquidFill',
data: [0.5, 0.4, 0.3, 0.2],
shape: 'container', // 全屏显示水球图
outline: {
show: false
}
}]
};
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.55, 0.4, 0.25],
radius: '60%',
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
// 自定义水球图的形状
shape: '',
label: {
position: ['38%', '40%'],
formatter: function() {
return 'ECharts\nLiquid Fill';
},
fontSize: 40,
color: '#D94854'
}
}]
};
课程收获：
学习到了通过v-charts对地图进行重构，简单的点可以通过地图就行实现，复杂的还是需要引入百度/高德地图进行重构，v-chart的好处是所有的设置可以单独的再data中自定义，方便修改参数，再有认识了水球图的的实现，从安装到使用的方法，再有就是看了水球图参数的基本用法，从波纹，到动画，再到文字边框，颜色等的修改等这些都是额可以很好的做到完善的，利用好插件才可以很好的方便开发使用，继续加油ing
点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦