学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能

学习在echarts中优化数据视图dataView样式 带表格样式

toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:
学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能_第1张图片像这种标题跟数据没有整齐对应上,看起来乱

改问题解决方案为,option 》 toolbox 》 feature 》 dataView 》optionTocontent 回调函数中处理,具体代码如下:

option = {
    color: ['#f54c49','#1976d2'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    toolbox: {
        show : true,
        feature : {
             dataView : {show: true, readOnly: false,
                 optionToContent: function (opt) {
                     var axisData = opt.xAxis[0].data;//x轴作为条件,y轴需改成yAxis[0].data;
                     var series = opt.series;
                     var tdHeads = '名称';
                     series.forEach(function (item) {
                         tdHeads += ''+item.name+'';
                     });
                     var table = ''+tdHeads+'';var tdBodys ='';for(var i =0, l = axisData.length; i < l; i++){for(var j =0; j < series.length; j++){if(typeof(series[j].data[i])=='object'){
                                 tdBodys +='';}else{
                                 tdBodys +='';}}
                         table +=''+ tdBodys +'';
                         tdBodys ='';}
                     table +='
'+series[j].data[i].value+' '+ series[j].data[i]+'
'+axisData[i]+'
'
; return table; } }, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} }, iconStyle:{ borderColor:'white' } }}

修改后的效果为:
学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能_第2张图片
学习在echarts中优化数据视图dataView样式带表格样式,支持复制功能_第3张图片
如果想解决复制问题,可以给table加个样式就解决了

var table = ''

主要是这个user-select: text; 就能复制了

result = {
    "title": {
        "text": "互动情况(UV)",
        "subtext": "注: 点击下方说明项可选择是否展示, UV计算方式: 各个行为对应用户总数(去重)",
        "textStyle": {
            "color": "rgba(255, 0, 0, 1)",
            "fontSize": 20
        }
    },
    "tooltip": {
        "trigger": "axis",
        "formatter": function (params) {
            let str = '';
            params.forEach((item, idx) => {
                str += `${item.marker} ${item.data.time}_${item.seriesName}:  ${item.data.value}`
                str += idx === params.length - 1 ? '' : '
'
}) return str }, }, "legend": { "type": "scroll", "bottom": 6, "data": [ "like", "comment", "collect", "share", "dislike", "ALL" ] }, "toolbox": { "show": true, "feature": { "dataZoom": { "yAxisIndex": "none" }, "dataView": { "show": true, "optionToContent": function (opt) { // console.log(opt) //该函数可以自定义列表为table,opt是给我们提供的原始数据的obj。 可打印出来数据结构查看 var axisData = opt.xAxis[0].data; //坐标轴 var series = opt.series; //折线图的数据 console.log("1") console.log(series) console.log("2") var tdHeads = `
`; //表头 var tdBodys = ""; series.forEach(function (item) { tdHeads += ``; }); var table = `
日期${item.name}
${tdHeads} `; for (var i = 0, l = axisData.length; i < l; i++) { for (var j = 0; j < series.length; j++) { if (series[j].data[i] == undefined) { tdBodys += ``; } else { tdBodys += ``; } } table += `${tdBodys}`; tdBodys = ""; } table += "
${"-"}${series[j].data[i]["value"]}
${axisData[i]}
"
; return table; }, "contentToOption": function (HTMLDomElement, opt) { return opt; }, "readOnly": false }, "magicType": { "type": [ "line", "bar" ] }, "restore": { }, "saveAsImage": { } } }, "xAxis": { "type": "category", "boundaryGap": false, "data": config.xAxis_data, }, "yAxis": { "type": "value", "axisLabel": { "formatter": "{value}" } }, "series": [ { "name": "like", "type": "line", "data": config.interaction_data.like }, { "name": "comment", "type": "line", "data": config.interaction_data.comment }, { "name": "collect", "type": "line", "data": config.interaction_data.collect }, { "name": "share", "type": "line", "data": config.interaction_data.share }, { "name": "dislike", "type": "line", "data": config.interaction_data.dislike }, { "name": "ALL", "type": "line", "data": config.interaction_data.ALL }, ] } return result

你可能感兴趣的:(Echarts,学习,echarts,javascript)