数据可视化柱状图案例代码

柒seven.

已于 2024-03-11 11:29:55 修改

阅读量1k

点赞数 24

文章标签： spark scala 大数据

于 2024-03-10 21:49:56 首次发布

本文链接：https://blog.csdn.net/2301_80464770/article/details/136507260

版权

1、引入ECharts脚本

2、为ECharts准备一个具备大小（宽高）的DOM

3、基于准备好的DOM，初始化ECharts图表

var myChart = echarts.init(document.getElementById("main"));

4、指定图表的配置项和数据，具有标题和下，y轴信息

5、最后使用刚指定的配置项和数据

myChart.setOption(option);

6、然后ctrl+s保存并启动文件

然后跳转浏览器就看到成果了

案例代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="js/echarts.min.js" ></script>

        <title></title>

       

    </head>

    <body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        var option ={
            title:{
                text:'这里是绘制的图表的标题',

                subtext:'这里是副标题'

            },

        }

        // 指定图表的配置项和数据

        option = {
            xAxis: {
            type: 'category',

                data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨']

            },

            yAxis: {
                type: 'value'

            },

            series: [{          

                data: [5, 12, 18, 10, 15, 9],

                type: 'bar'

            }]

        };


 

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>