以下是具体属性：
toolbox.show
boolean
[ default: true ]
是否显示工具栏组件。
toolbox.orient
string
[ default: 'horizontal' ]
工具栏 icon 的布局朝向。
可选：
'horizontal'
'vertical'
toolbox.itemSize
number
[ default: 15 ]
工具栏 icon 的大小。
toolbox.itemGap
number
[ default: 10 ]
工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
toolbox.showTitle
boolean
[ default: true ]
是否在鼠标 hover 的时候显示每个工具 icon 的标题。
toolbox.feature
Object
各工具配置项。
除了各个内置的工具按钮外，还可以自定义工具按钮。
注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：
{
toolbox: {
feature: {
myTool1: {
show: true,
title: '自定义扩展方法1',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
alert('myToolHandler1')
}
},
myTool2: {
show: true,
title: '自定义扩展方法',
icon: 'image://http://echarts.baidu.com/images/favicon.png',
onclick: function (){
alert('myToolHandler2')
}
}
}
}
}
toolbox.iconStyle
Object
公用的 icon 样式设置。
toolbox.zlevel
number
[ default: 0 ]
所有图形的 zlevel 值。
zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
toolbox.z
number
[ default: 2 ]
组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
z相比zlevel优先级更低，而且不会创建新的 Canvas。
toolbox.left
string, number
[ default: 'auto' ]
工具栏组件离容器左侧的距离。
left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
toolbox.top
string, number
[ default: 'auto' ]
工具栏组件离容器上侧的距离。
top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
toolbox.right
string, number
[ default: 'auto' ]
工具栏组件离容器右侧的距离。
right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。
toolbox.bottom
string, number
[ default: 'auto' ]
工具栏组件离容器下侧的距离。
bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
默认自适应。
toolbox.width
string, number
[ default: 'auto' ]
工具栏组件的宽度。默认自适应。
toolbox.height
string, number
[ default: 'auto' ]
工具栏组件的高度。默认自适应。
1.引入 import China from '@/utils/echarts/china-map-geojson.min'
2.引入import '@/utils/echarts/sichuan'
3.this.$echarts.registerMap('china', China.ChinaData)
const geoCoordMap = {
甘孜藏族自治州: [99.9207, 31.0803],
阿坝藏族羌族自治州: [102.4805, 32.4536],
凉山彝族自治州: [101.9641, 27.6746],
凉山彝族自治州1: [102.1111, 28.6746],
绵阳市: [104.7327, 31.8713],
达州市: [107.6111, 31.333],
广元市: [105.6885, 32.2284],
雅安市: [102.6672, 29.8938],
宜宾市: [104.6558, 28.548],
乐山市: [103.5791, 29.1742],
南充市: [106.2048, 31.1517],
巴中市: [107.0618, 31.9977],
泸州市: [105.4578, 28.493],
成都市: [103.9526, 30.7617],
资阳市: [104.9744, 30.1575],
攀枝花市: [101.6895, 26.7133],
眉山市: [103.8098, 30.0146],
广安市: [106.6333, 30.4376],
德阳市: [104.48, 31.1133],
内江市: [104.8535, 29.6136],
遂宁市: [105.5347, 30.6683],
自贡市: [104.6667, 29.2786]
}
const mapData = [
{ name: '资阳市', value: 5 },
{ name: '乐山市', value: 6 },
{ name: '成都市', value: 7 },
{ name: '雅安市', value: 9 },
{ name: '阿坝藏族羌族自治州', value: 10 },
{ name: '凉山彝族自治州', value: 11 },
{ name: '凉山彝族自治州1', value: 12 }
]
const convertData = function(data) {
var res = []
for (var i = 0 i < data.length i++) {
var geoCoord = geoCoordMap[data[i].name]
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
selected: true //点击事件
})
}
}
return res
}
const option = {
geo: {
map: '四川',
itemStyle: {
areaColor: '#e8f5fe',
borderColor: '#1c85f6'
},
emphasis: {
itemStyle: {
areaColor: 'lightblue',
shadowColor: '#fff',
shadowBlur: 10
},
label: {
show: false
}
}
},
series: [
{
name: '666',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: [20, 20],
label: {
normal: {
show: true,
textStyle: {
color: '#2cdee5',
fontSize: 12
},
position: 'bottom',
formatter(value) {
return value.data.value[2]
}
}
},
itemStyle: {
normal: {
color: '#2cdee5'
}
},
data: convertData(
mapData
),
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
zlevel: 1
}
]
}
效果图:
Echarts使用有很多方式，这里我来说在 webpack 中使用 ECharts...
2.引入 ECharts
可以直接在项目中引用，这里是在main,js引用
3.直接使用
这样简单的一个图表就成功了 如下图：
下面直接奔入主题，对于一些公司的业务需要与图表打交道，比如大数据可视化平台，echarts就可以完美胜任了。
但是对于刚接触echarts的或者是不经常用的朋友，虽说简单好用 但是去改变echarts图表的样式还是很费时的。
毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。
下面是我用到的图表总结的一些参数设置，我就不一一手写解释了，直接用图来展现出来
今天先整理到这里，后期增加关系图、仪表盘、散点图 以及我们的大地图......
整理地图相关参数：
①②③④
JSON引入方式
地图属性设置都会在geo对象中设置相应参数，下面介绍常用参数：
地图上的内容主要在serise中设置，
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）