EChart学习与使用

1.使用

1.引入:只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2.绘制简单表格

2.1准备一个具备宽高的DOM容器

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

2.2通过echart.init方法初始化容器,通过setOption生成一个柱状图

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        //获取容器并初始化容器
        var myChart = echart.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title:{
                text:"标题"
            },
            tooltip:{},
            legend:{['数量','价格']},//该柱状图拥有的类型
            xAisx:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] //数组,显示的数据
            },
            yAisx:{
                data:[] //数组,y轴显示
            },
            series:[{
                name:'数量',
                type:'par',//显示类型为柱状图
                data:[5, 20, 36, 10, 10, 20]//数据量
            },{
                name:'价格',
                type:'par',//显示类型为柱状图
                data:[5, 20, 36, 10, 10, 20]//数据量
            }]
            
        }
        //使用刚指定的配置项和数据显示图表
        myChart。setOption(option);
    </script>

</body>

2.

猜你喜欢

转载自blog.csdn.net/Hello_sum/article/details/81407898
今日推荐