echarts 配置项里 normal 属性的含义是什么?
如题,官方文档并没有对 normal
做出解释,但网络上的诸多例子中它却频频出现,本人在测试中恰好遇到了它。
有人回答说:“normal 是图形在默认状态下的样式,加上这个属性和不加这个属性样式都是一样的”,但是他们只验证了 label.normal
无需设置。而我在测试折线图线条渐变时,不设置 normal
是达不到效果的。
参考配置:
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
itemStyle: {
// 必须在 normal 里设置
normal: {
lineStyle:{
color:{
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
}
},
},
// 直接设置会失效
// lineStyle:{
// color:{
// colorStops: [{
// offset: 0, color: 'red' // 0% 处的颜色
// }, {
// offset: 1, color: 'blue' // 100% 处的颜色
// }],
// }
// },
},
}]
};
这个配置确实被废弃了,可以生效是为了向下兼容:
写的时候最好看你使用的版本,然后按照文档来写,按照新版的,直接在itemStyle或lineStyle中设置color就可以了:
维度名 纬度名的书写位置
维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
例子中,'score'、'amount'、'product' 就是维度名。从第二行开始,才是正式的数据。dataset.source 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行(列)就是维度,或者 dataset.sourceHeader: false 表明第一行(列)开始就直接是数据。
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
['Milk Tea', 86.5, 92.1, 85.7, 83.1],
['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
]
},
这个例子汇总source的第一行才是纬度。
常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。
dimensions: ['product', '2015', '2016', '2017'],
`这里有四个纬度,默认把第一个纬度映射到x轴,后面纬度映射到y轴。`
理解话语
这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。
在第一个直角坐标系中,是映射到了dataset 的每一行了,不过映射了三回而已。
map 系列
- 配置了 map的 series属性点击了item,item会高亮,配置 geo 或则series都会 显示出地图效果
- 通过给 map的 series 的 data 属性设置 我们写成的 行政区划code数组,注意数组里对象 的属性为 name 和 code, 注意name属性名字不可以修改,修改需要参考配置文件,name属性是与匹配 地图json里的 每个区域的名字匹配
- 可以给series 里的 data 数组的某一项单独设置itemStyle, 然后再mapChart 触发 ‘click’ 事件时候,然后把这个itemStyle 对象置为 {} ,可以做到局部高亮map的某个region; 或者使用 dispatchAction({ type: ‘highlight’, name: “” }) 搭配 dispatchAction({ type: ‘downplay’,name:“”}) 也可以实现
series
在series 里的item配置 label等属性会覆盖全局设置的label属性
设置pie的label全部显示
series: [
label: {
width: 100,
bleedMargin: -30,
}
]
//通过设置bleedMargin 为负值
地图打点经纬度需要精确到8位才能显示
精确到8位才能显示,此外还需要geo声明
data: [
{name: '123',
type: 'op',
value:[120.85293436, 30.38103345,'id123123']},
{name: '123',
type: 'op',
value:[120.21551, 30.25308,'id123123']}
],
series 中type为map的系列可以通过geoIndex这个属性来关联geo
关联后,就不会出现地图显示两个问题了,但是series 中type为map的系列itemStyle等属性会失效
{
name: 'huzhou',
type: 'map',
zlevel: 2,
mapType: 'huzhou', // 自定义扩展图表类型
geoIndex: 0, //,map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话,map 和 其他 series(例如散点图)就可以共享一个 geo 组件了
// top: 100,
labelLine: {
show: true
},
},
data: this.mapData
},
给地图打点需要写出geo
echarts 对提示框数据(tooltip)使用 formatter 进行修改后,前面的小圆点不见了
通过打印 formatter 的 params 参数可以看到有个 marker 属性描绘的是小圆点的标签和样式!所以在下面代码高亮位置加入 params[i].marker 即可正常显示。
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line', // 默认为直线,可选为:'line' | 'shadow'
},
formatter(params) {
let str = '';
str += `<div>${params[0].name}</div>`;
for (let i = 0; i < params.length; i += 1) {
str += `${params[i].marker} <span>${params[i].seriesName}</span> : <span>${params[i].data ? Math.round(params[i].data) : '0'
}</br>`;
}
return str;
}
}
柱状图堆叠
series里需要堆叠的项目 的
stack
设为相同的·值