echarts简单的折现数据可视化(需要引入echarts文件)

GGbond_POP

已于 2022-06-07 20:00:09 修改

阅读量126

点赞数

文章标签： echarts javascript ecmascript

于 2022-06-07 19:59:14 首次发布

本文链接：https://blog.csdn.net/weixin_45957302/article/details/125172081

版权

因为是拷贝echarts里面的,我只做代码讲解,其余的俺不知道

上代码;

html代码:

<body>
    <!-- 为 ECharts 定义了宽高的 DOM -->
//这里我们注意这个ID是什么就行了
    <div id="main" style="width: 60rem;height:40rem;"></div>
    
</body>

js代码:

<script>
    $(function () {

        function echeartlist() { 
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;




        option = {
            title: {
                text: '账号信息'
                , textStyle: { fontSize: 20 }//字体大小格式
            },
            tooltip: {
                trigger: 'axis'
                , textStyle: {
                    fontSize: 40
                }


            },
            legend: {
                data: ['user1', 'user2',
                    'user3', 'user4',
                    'user5', 'user6']//头部的内容以及几个数据
                , textStyle: { fontSize: 35 }

            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },//头部内容位置
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'
                ]X轴内容

                , axisLabel: {
                    textStyle: {
                        fontSize: 25
                    }
                }

            },
            yAxis: {
                type: 'value',

            },//Y轴内容,需要更改就写一个函数在这更改

//以下就是每个数据的内容
            series: [
                {
                    name: 'user1',
                    type: 'line',
                    data: [115, 132, 101, 134, 90, 230, 210]
                    //, label: {
                    //    normal: {
                    //        show: true, textStyle: {
                    //            fontSize: 25
                    //        }
                    //    }
                    //}//每个点的数字显示,这里我注释掉了

                },

                {
                    name: 'user2',
                    type: 'line',

                    data: [0, 182, 191, 234, 290, 330, 310]
                    //, label: {
                    //    normal: {
                    //        show: true, textStyle: {
                    //            fontSize: 25
                    //        }
                    //    }
                    //}

                },
                {
                    name: 'user3',
                    type: 'line',
                    data: [0, 232, 151, 154, 190, 330, 410]
                    //, label: {
                    //    normal: {
                    //        show: true, textStyle: {
                    //            fontSize: 25
                    //        }
                    //    }
                    //}
                },
                {
                    name: 'user4',
                    type: 'line',
                    data: [0, 332, 301, 334, 390, 330, 315]
                    //, label: {
                    //    normal: {
                    //        show: true, textStyle: {
                    //            fontSize: 25
                    //        }
                    //    }
                    //}
                },
                {
                    name: 'user5',
                    type: 'line',
                    data: [0, 250, 190, 194, 29, 933, 32]
                    //, label: {
                    //    normal: {
                    //        show: true, textStyle: {
                    //            fontSize: 25
                    //        }
                    //    }
                    //}
                },
                {
                    name: 'user6',
                    type: 'line',
                    data: [0, 162, 190, 994, 129, 133, 192]
                    , label: {
                        normal: {
                            show: true, textStyle: {
                                fontSize: 25
                            }
                        }
                    }
                }
            ]
        };


        option && myChart.setOption(option);
        }


    




</script>

需要echarts文件私,这个是可以用的,看不懂的就copy看看效果就晓得了;