zoukankan      html  css  js  c++  java
  • JavaScript—数据可视化(ECharts)

    Echarts具有丰富的图表,可以说是数据可视化的神器;

    1.下载Echarts

    官网下载地址:https://echarts.baidu.com/index.html

    2.Echarts引用案例—柱状图

    <head>
        <script src="C:Userst.cnDesktopecharts.min.js"></script>
    </head>
    <body>
        <div id="main" style=" 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 示例',
                    subtext: '百果园水果销量'
                },
                tooltip: {trigger: 'axis'},
                legend: {
                    data:['一月销量','二月销量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis:{
                    type:'category',
                    data: ["苹果","橘子","火龙果","车厘子","榴莲","百香果"]
                },
                yAxis:{type : 'value'},
                series: [
                    {
                        name: '一月销量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20],
                        color:'#CC0066'
                    },
                    {
                        name: '二月销量',
                        type: 'bar',
                        data: [6, 15, 36, 15, 20, 15],
                        color:'#009999',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,      //开启显示
                                    position: 'top', //在上方显示
                                    textStyle: {     //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        },
                    }
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

    https://www.cnblogs.com/OliverQin/p/11077590.html

    https://blog.csdn.net/qq_40162735/article/details/81977068

    https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

  • 相关阅读:
    X
    W
    J
    A
    Q
    P
    B
    排列和组合的求解
    深度学习之序列处理
    32位和64位数据类型大小对比
  • 原文地址:https://www.cnblogs.com/liuhaidon/p/11685698.html
Copyright © 2011-2022 走看看