账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    javascript - Echarts中联动和共享数据集图表中叠加了上一条的数据?
    52
    0
    var chartDom = document.getElementById('main')
    var myChart = echarts.init(chartDom)
    var option = {
        color: ['#673AB7', '#02A9F4', '#8BC34B', '#FFC109', '#F44335', '#9D27B0', '#00BCD4', '#CDDD38', '#FFEB3A', '#FF6434', '#403AB5','#2196F3','#4BAF50','#FF9800','#E92662'],
        legend: {
            icon: "circle",
            bottom: '0%'
        },
        tooltip: {
            trigger: 'axis',
            showContent: false
        },
        dataset: {
            source: res
        },
        xAxis: { 
            type: 'category',
            boundaryGap: false,
            axisLine:{
                lineStyle:{
                    color: '#C8C8C8' //x轴轴线颜色
                }
            },
            axisLabel: {
                color: '#C8C8C8',// x轴字体颜色
            }
        },
        yAxis: { 
            gridIndex: 0,
            axisLine:{
                lineStyle:{
                    color: "#C8C8C8" //x轴轴线颜色
                }
            }
        },
        grid: { 
            top: '55%' 
        },
        series: [
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: { focus: 'series' }
            },
            {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {
                focus: 'self'
            },
            label: {
                formatter: '{b}:{@[1]}人 ({d}%)',
                color: '#000000'
            },
            encode: {
                itemName: 'product',
                value: [1],
                tooltip: [1]
            }
        }]
    };
    myChart.on('updateAxisPointer', function (event) {
        // console.log('qqqqqqqqq', event)
        const xAxisInfo = event.axesInfo[0]
        if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1
            myChart.setOption({
                series: {
                    id: 'pie',
                    label: {
                        formatter: '{b}: {@[' + dimension + ']}人 ({d}%)'
                    },
                    encode: {
                        value: dimension,
                        tooltip: dimension
                    }
                }
            })
        }
        myChart.setOption(option)
    })
    option && myChart.setOption(option)

    图片.png
    图片.png

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益