ECharts堆叠区域图重叠显示_echarts两个饼图堆叠在一起怎么展示出来-CSDN博客

本文链接：https://blog.csdn.net/www93111/article/details/54291824

本文介绍如何使用ECharts创建堆叠区域图，包括设置图表标题、坐标轴标签、图例以及数据，展示了如何调整颜色和样式，以清晰地呈现连网用户、上网人数和有效认证的数据变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

regionalMap();
function regionalMap(){
   var myChartFour = echarts.init(document.getElementById('regionalMap'));
        optionFour = {
                    title: {
                       textStyle:{color:'#92b1d8',fontSize:'14'},
                       y:'bottom',
                       right:'34',
                        text: '单位：万人'
                    },
                    grid: {
                        left: '4%',
                        right: '2%',
                        top: '8%',
                    },
                    legend: {
                       textStyle:{color:'#92b1d8',},
                       y:'bottom',
                       right:'134',
                        data:[{name:'连网用户',icon : 'bar',textStyle:{fontWeight:'bold', color:'#24573b'}},
                              {name:'上网人数',icon : 'bar',textStyle:{fontWeight:'bold', color:'#722f2f'}},
                              {name:'有效认证',icon : 'bar',textStyle:{fontWeight:'bold', color:'#32446b'}},
                            ]
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis : [
                        {
                           axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#92b1d8'
                                },
                            },
                            type : 'category',
                            boundaryGap : false,
                            data: ['4.4','4.5','4.6','4.7','4.8','4.9','4.10']
                        }
                    ],
                    yAxis: [
                        {
                            axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#92b1d8'
                                    },
                            },
                           splitLine: {
                                lineStyle: {
                                    // 使用深浅的间隔色
                                    color: ['#393e4c']
                                }
                           },
                            name: '',
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name:'连网用户',
                            type:'line',
                            showSymbol: false,
                            areaStyle: {normal: {}},
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            itemStyle:{
                                normal:{
                                    barBorderColor:'#24573b',
                                    color:'#24573b'
                                },
                                emphasis:{
                                    color:'#24573b'
                                },
                          },
                            data:[50,40,30,60,90,80,70]
                        },
                        {
                            name:'上网人数',
                            type:'line',
                            showSymbol: false,
                            areaStyle: {normal: {}},
                            lineStyle: {
                                normal: {
                                    width: 1
                                },
                            },
                           itemStyle:{
                                normal:{
                                    barBorderColor:'#722f2f',
                                    color:'#722f2f'
                                },
                                emphasis:{
                                    color:'#722f2f'
                                },
                            },

                            data:[20,30,40,50,60,70,80]
                        },
                        {
                            name:'有效认证',
                            type:'line',
                            showSymbol: false,
                            areaStyle: {normal: {}},
                            lineStyle: {
                                normal: {
                                    width: 1
                                }
                            },
                            itemStyle:{
                                normal:{
                                    barBorderColor:'#32446b',
                                    color:'#32446b'
                                },
                                emphasis:{
                                    color:'#32446b'
                                },
                            },

                            data:[70,20,60,40,50,30,10]
                        },
                    ]
               };
                myChartFour.setOption(optionFour);
}