人均纯收入：' + lineData + '元
' + '' + tooltipsData[index] + '

'; }, extraCssText: 'box-shadow: 0 0 3px #A0C5C8;' }, itemStyle: { borderWidth: 1, borderColor: '#00a7db', color: { type: 'radial', x: 0.5, y: 0.5, r: 0.5, colorStops: [{ offset: 0.4, color: '#ffffff' }, { offset: 1, color: '#4C84FF' // 100% 处的颜色 }], globalCoord: false } } } ] }; myChart.setOption(option); /** * * 对象深拷贝 * * @param json */ function deepClone(json) { var s = JSON.stringify(json); return JSON.parse(s); } /** * 注册x 轴点击事件 */ myChart.on('click', function(e) { var componentType = e.componentType; var year = ''; switch (componentType) { case 'series': year = e.name; break; case 'xAxis': year = e.value; break; } selectAction(year) }); // 加载后默认选中当前年 selectCurrent(); /** * 选中操作 * @param year * @param callback 自定义事件函数钩子参数为 x轴刻度值 * @see selectedStyle */ function selectAction(year, callback) { selectedStyle(year, callback); if ('[object Function]' === Object.prototype.toString.call(callback)) { callback(year); } myChart.setOption(option); } /** * 点击x 轴事件触发选中高亮同时触发 callback 事件 * @param year */ function selectedStyle(year) { var scatterData = option.series[2].data; var length = scatterData.length; for (var i = 0; i < length; i++) { var lineData = option.series[0].data[i]; // 移除坐标轴点样式 delete scatterData[i].itemStyle; // 移除折线样式 delete lineData.label; //匹配到就增加样式 if (year === scatterData[i].value[0]) { var scatterColor = '#4C84FF'; // 折线选中变大变色 lineData.label = { show: true, fontSize: 16, color: scatterColor }; // x轴圆点变色 scatterData[i].itemStyle = { color: scatterColor }; } } } /** * 默认选中当前年 * @param callback 回调钩子 */ function selectCurrent(callback) { var currentYear = new Date().getFullYear().toString(); selectAction(currentYear, callback) }

折线图 渐变区域带选中高亮效果

折线图渐变区域带选中高亮效果