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

20:11:45图表已生成
代码
 function obtainEchartDataSource() {
     var source = {
         "beans": [{
                 "avgIncome": "3158.00",
                 "subTitle": "较前一年变化 --",
                 "year": "2014"
             },
             {
                 "avgIncome": "2450.00",
                 "subTitle": "较前一年减少 22.42%",
                 "year": "2015"
             },
             {
                 "avgIncome": "6450.00",
                 "subTitle": "较前一年增加 163.27%",
                 "year": "2016"
             },
             {
                 "avgIncome": "8222.00",
                 "subTitle": "较前一年增加 21.27%",
                 "year": "2017"
             },
             {
                 "avgIncome": "0",
                 "subTitle": "较前一年减少 100.00%",
                 "year": "2018"
             },
             {
                 "avgIncome": "0",
                 "subTitle": "较前一年变化 --",
                 "year": "2019"
             }
         ]
     };

     var beans = source.beans;
     var xAxisData = [];
     var seriesLineData = [];
     var tooltipsData = [];
     var scatterData = [];
     for (var i in beans) {
         var y = beans[i].year;
         var avgIncome = beans[i].avgIncome;
         var subTitle = beans[i].subTitle;
         // x轴刻度
         xAxisData.push({
             value: y
         });
         // 折线数据
         seriesLineData.push({
             value: avgIncome
         });
         // 提示框次级数据
         tooltipsData.push(subTitle);
         // x轴坐标点数据
         scatterData.push({
             value: [y, 0]
         })
     }
     var last = (Number)(beans[beans.length - 1].year);
     // 限制到2020年   无限制放开
     tailRecursion(xAxisData, last);

     return {
         xAxisData: xAxisData,
         scatterData: scatterData,
         seriesLineData: seriesLineData,
         tooltipsData: tooltipsData
     }
 }

 /**
  * 处理x轴年份扩展
  * @param xData
  * @param value
  */
 function tailRecursion(xData, value) {
     if (value < 2020) {
         value++;
         xData.push({
             value: value
         });
         tailRecursion(xData, value);
     }
 }

 var dataSource = obtainEchartDataSource();


 var option = {
     tooltip: {
         show: true
     },
     grid: {
         top: '30%',
         left: '1%',
         right: '1%',
         bottom: '0%',
         containLabel: true
     },
     xAxis: [{
         type: 'category',
         // boundaryGap: false,
         axisTick: {
             show: false
         },
         // x轴 点击触发事件
         triggerEvent: true,
         data: dataSource.xAxisData
     }],
     yAxis: [{
         type: 'value',
         name: '单位（元）',
         splitLine: {
             show: false
         },
         axisLine: {
             show: false
         },
         axisLabel: {
             show: true
         },
         axisTick: {
             show: false
         }
     }],
     series: [{
             name: '人均纯收入',
             type: 'line',
             //是否平滑曲线显示
             smooth: true,
             // 默认是空心圆（中间是白色的），改成实心圆
             symbol: 'circle',
             // 屏蔽标记鼠标事件
             silent: true,
             symbolSize: 1,
             lineStyle: {
                 normal: {
                     width: 4,
                     // 线条颜色
                     color: "#4C84FF"
                 }
             },
             label: {
                 show: true,
                 position: 'top',
                 formatter: '{c} 元',
                 textStyle: {
                     color: '#4f4a51',
                     fontSize: 14,
                     fontWeight: 'bold'
                 }
             },
             areaStyle: { //区域填充样式
                 normal: {
                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                         offset: 0,
                         color: 'rgba(0, 136, 212, 0.2)'
                     }, {
                         offset: 1,
                         color: 'rgba(0, 136, 212, 0)'
                     }], false),
                     shadowColor: 'rgba(0, 0, 0, 0.1)',
                     shadowBlur: 10
                 }
             },
             data: dataSource.seriesLineData
         },
         {
             type: 'pictorialBar',
             data: deepClone(dataSource.seriesLineData),
             barGap: "10%",
             symbolRepeat: true,
             symbolMargin: 2,
             // 点状线 鼠标不触发事件
             silent: true,
             symbol: "rect",
             symbolSize: 2,
             color: '#c8c5d1',
             symbolClip: true

         },
         {
             type: 'scatter',
             name: '年份',
             symbolSize: 10,
             data: dataSource.scatterData,
             tooltip: {
                 show: true,
                 backgroundColor: 'white',
                 textStyle: {
                     color: '#000'
                 },
                 formatter: function(param) {
                     var index = param.dataIndex;
                     var lineData = option.series[0].data[index].value;
                     var tooltipsData = dataSource.tooltipsData;
                     return '<div style="border: medium #0094ff;"><span style="font-size:15px;color: #0a080b"><strong>人均纯收入：</span><span style="color: #F84040">' + lineData +
                         '</style></span>元</strong></br>' +
                         '<span style="font-size:13px; color: #9D9D9D">' + tooltipsData[index] + '</span></div>';
                 },
                 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)
 }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
