Echarts折线图拐点突出显示效果

代码如下：

 //初始化数据录入情况echarts实例var echarts_dataEntry = echarts.init(document.getElementById('echarts_dataEntry'));option = {title: {// text: '折线图堆叠'},tooltip: {trigger: 'axis'},legend: {//  icon: "circle",  //图例变成小圆点x: 'center',      //可设定图例在左、右、居中y: 'bottom',     //可设定图例在上、下、居中data: ['基础数据', '空间数据', '成果数据']},grid: {top: '3%',left: '3%',right: '4%',bottom: '8%',containLabel: true},xAxis: {type: 'category',boundaryGap: false,data: ['彭万里', '高大山', '谢大海', '马宏宇', '林莽', '黄强辉', '章汉夫', '范长江', '林君雄', '谭平山', '马继祖']},yAxis: {type: 'value',splitLine: { //去除网格线show: true,lineStyle: {type: 'dashed',color: ['rgba(107, 107, 107, 0.5)']}},},series: [{name: '基础数据',type: 'line',color: ['#2196F3'],hoverAnimation: false,  // 将鼠标置于拐点上的hover效果去除symbol: 'circle',      //设置折线图的拐点为圆形symbolSize: 8,         // 拐点显示大小itemStyle: {emphasis: {          //突出效果配置(鼠标置于拐点上时)borderColor: '#fff',    //  拐点边框颜色borderWidth: 2,         //  拐点边框宽度shadowColor: '#2196F3', //  阴影颜色shadowBlur: 10          //  阴影渐变范围控制},},data: [7, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 23.3, 18.3, 13.9, 9.6]},{name: '空间数据',type: 'line',color: ['#1EA80E'],hoverAnimation: false,  // 将鼠标置于拐点上的hover效果去除symbol: 'circle',      //设置折线图的拐点为圆形symbolSize: 8,         // 拐点显示大小itemStyle: {emphasis: {          //突出效果配置(鼠标置于拐点上时)borderColor: '#fff',    //  拐点边框颜色borderWidth: 2,         //  拐点边框宽度shadowColor: '#1EA80E', //  阴影颜色shadowBlur: 10          //  阴影渐变范围控制},},data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17, 14.2, 10.3, 6.6, 4.8]},{name: '成果数据',type: 'line',color: ['#F59A23'],hoverAnimation: false,  // 将鼠标置于拐点上的hover效果去除symbol: 'circle',      //设置折线图的拐点为圆形symbolSize: 8,         // 拐点显示大小itemStyle: {emphasis: {          //突出效果配置(鼠标置于拐点上时)borderColor: '#fff',    //  拐点边框颜色borderWidth: 2,         //  拐点边框宽度shadowColor: '#F59A23', //  阴影颜色shadowBlur: 10          //  阴影渐变范围控制},},data: [4, 6, 5, 8, 6, 12, 9, 14, 12, 6, 3]}]};echarts_dataEntry.setOption(option);

关于折线图拐点突出显示效果的具体代码在series每一项的itemStyle中的emphasis里面

显示效果如下：

Echarts折线图拐点突出显示效果相关推荐

echarts折线图拐点样式设置
echarts折线图拐点样式设置代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
echarts折线图拐点样式图案
先来看看效果图,每个线条拐点使用不一样的图案实现方式: 设置series里的symbol和symbolSize属性,echarts默认支持7种图案:circle,rect,roundRect,tri ...
解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）
解决办法:在series里选择一条数据,给其label的position赋值为"top"或"bottom",与另一个进行区分. 示例代码如下: option = ...
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
Echarts折线图属性设置大全
Echarts折线图属性设置大全 var option = {backgroundColor: '#FFF0F5',title: {text: '折线图',subtext: '模拟数据',x: 'ce ...
Echarts折线图和地图（个人总结）
Echarts折线图和地图(个人总结) Echarts折线图和地图 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
Echarts折线图案例
问题:重置echarts折线图时,总会出现多个数据的拐点,与实际渲染的数据拐点不符合. 解决: 在实例化echarts后 clear 上一次的图. myEcharts.clear() 案例 impor ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...

Echarts折线图拐点突出显示效果

Echarts折线图拐点突出显示效果相关推荐

最新文章

热门文章