菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育

标题: 2022-11-16 王嘉乐 [打印本页]

作者: yousay!    时间: 2022-11-17 18:48
标题: 2022-11-16 王嘉乐
一、今日学习内容Echartsday01
5数据可视化
1插件----js插件
2性能好,可流程运行PC与移动端
3兼容性主流浏览器
4提供很多常用图表,也可以定制化开发
使用步骤:
1.引入--bootcdn2.准备一个盒子,有宽高大小的dom容器3.初始化实例对象4.指定配置项和数据option5.将配置向给echarts实例对象
echarts 中的通用属性:
title:标题tooltip:提示框组件
echarts中的通用属性
title:标题
tooltip:提示框组件       
toolbox:echarts提供的工具栏,配置在option中
lengend:图例对象
主要配置:
series:系列列表,每个系列通过type决定自己的图表类型
xAxis:直角坐标系grid中的x轴
grid:直角坐标系内绘图网格
color:调色盘颜色列表
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>

<body>
    <div id="box" style="width: 800px;height:500px;"></div>
    <script>
        const box = document.querySelector('#box');
        let xData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        let value = [120, 200, 150, 80, 70, 110, 130];

        var myChart = echarts.init(box);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: xData
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: value,
                    type: 'bar'
                }
            ]
        };

        option && myChart.setOption(option);


    </script>
</body>

</html>






欢迎光临 菁英数字科技(猩码)-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4