Echarts相关属性

width: 1, //连线粗细

color: “#F21612”, //轨迹线颜色

}

},

// 阴影区域

areaStyle: {

// 渐变颜色

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(243, 78, 98, 0.8)’

}, {

offset: 1,

color: ‘rgba(255, 255, 255, 0)’

}]),

// 常规设置

// normal: {

// opacity: 1,//阴影面积 0无 1全

// color: “#ddd”,

// origin: “start”

// },

}

},{

name: “bbb的值”,

type: ‘line’,

smooth: true, //是否平滑显示

symbol: ‘circle’,//每个小点点的样式风格

showSymbol: false,//默认不展示小点点 经过再显示

showAllSymbol: false,

z: 10,

symbolSize: 5,

data: [222, 111, -333, 234, -30, 100, 110],

silent: false,

itemStyle: {

normal: {

color: ‘#A9B2B8’,//轨迹线和小点点的颜色

borderColor: ‘#A9B2B8’,//小点点的边框颜色

}

},

lineStyle: {

normal: {

width: 1, //连线粗细

color: “#A9B2B8”, //轨迹线颜色

}

},

// 阴影区域

areaStyle: {

// 渐变颜色

《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(169,178,184, 0.8)’

}, {

offset: 1,

color: ‘rgba(255, 255, 255, 0)’

}]),

// 常规设置

// normal: {

// opacity: 0,//阴影面积 0无 1全

// color: “#ddd”,

// origin: “start”

// },

}

}]

}

实现二：无坐标轴 提示信息等

option = {

grid: {

left:0,

right:10,

top:0,

bottom:0

},

xAxis: {

type: ‘category’,

boundaryGap: false,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],

axisLine: {

show: false,

},

axisLabel: {

show: false,

},

axisTick: {

show: false

},

},

yAxis: {

type: ‘value’,

scale: false,

axisLabel: {

show: false,

},

splitLine: {

show: false,

},

axisLine: { show: false, onZero: false },

axisTick: { show: false },

alwaysShowContent: false

},

series: [{

name: “aaa的值”,

type: ‘line’,

smooth: true, //是否平滑显示

symbol: ‘circle’,//每个小点点的样式风格

showSymbol: false,//默认不展示小点点 经过再显示

showAllSymbol: false,

z: 10,

symbolSize: 5,

data: [320, 332, 301, 334, 30, -30, -320],

silent: false,

itemStyle: {

normal: {

color: ‘#F21612’,//轨迹线和小点点的颜色

borderColor: ‘#F21612’,//小点点的边框颜色

}

},

lineStyle: {

normal: {

width: 1, //连线粗细

color: “#F21612”, //轨迹线颜色

}

},

// 阴影区域

areaStyle: {

// 渐变颜色

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(243, 78, 98, 0.8)’

}, {

offset: 1,

color: ‘rgba(255, 255, 255, 0)’

}]),

}

}]

}

阴影区域 不以x轴为边界 仅在曲线下展示 ：通过origin: "start"属性实现

option ={

grid: {

left:0,

right:10,

top:0,

bottom:0

},

xAxis: {

type: ‘category’,

boundaryGap: false,

data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],

axisLine: {

show: false,

},

axisLabel: {

show: false,

},

axisTick: {

show: false

},

},

yAxis: {

type: ‘value’,

// scale: false,

// axisLabel: {

// show: false,

// },

splitLine: {

show: false,

},

axisLine: { show: false, onZero: false },

// axisTick: { show: false },

// alwaysShowContent: false

},

series: [{

name: “bbb的值”,

type: ‘line’,

smooth: true, //是否平滑显示

symbol: ‘circle’,//每个小点点的样式风格

// showSymbol: false,//默认不展示小点点 经过再显示

showAllSymbol: false,

hoverAnimation:false,

z: 10,

symbolSize: 5,

data: [222, 111, -333, 234, -30, 100, 110],

// silent: false,

itemStyle: {

normal: {

color: ‘#A9B2B8’,//轨迹线和小点点的颜色

borderColor: ‘#A9B2B8’,//小点点的边框颜色

}

},

lineStyle: {

normal: {

width: 1, //连线粗细

color: “#A9B2B8”, //轨迹线颜色

}

},

// 阴影区域

areaStyle: {

// 渐变颜色

color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

offset: 0,

color: ‘rgba(169,178,184, 0.8)’

}, {

offset: 1,

color: ‘rgba(255, 255, 255, 0)’

}]),

origin: “start”

// 常规设置

// normal: {

// opacity: 0.3,//阴影面积 0无 1全

// color: “#ddd”,

// origin: “start”

// },

}

}]

}

效果对比

静态绘制echarts：animation: false,

[Echarts中属性areaStyle折线图线下方区域颜色修改](()

echarts折线图 鼠标移入不改变小点显示样式：hoverAnimation:false,==》[echarts饼图鼠标移入，悬停部分不放大突出](()

[Echart总结【一 坐标轴属性】](()

[Echarts 的grid各个参数的含义](()

[echarts属性的设置（完整大全）](()

[echarts y轴均分问题](()

[echarts属性随手记](()

[echarts的series配置](()

饼图

[Echarts 饼图中间添加文字、title、graphic](()

根据条件：取消ios端 左滑返回上一页的默认事件：@touchstart.prevent