0
点赞
收藏
分享

微信扫一扫

Echarts 开源的可视化图表库 快速制图工具

黎轩的闲暇时光 2022-03-30 阅读 38

说明:

制图工具,开源的,国内最流行的可视化图表库

安装

在 echarts CDN by jsDelivr - A CDN for npm and GitHub 选择 dist/echarts.js,点击并保存文件

<script src="echarts.js"></script>

使用

入门案例:

先声明一个图表容器 ,注意容器必须要有宽高

<div class="contanier">
        <div class="demo1" style="width: 33%;  height:33vh;"></div>
 </div>

 创建并配置

 <script>
        // 1创建实例
        var myChar = echarts.init(document.querySelector(".demo1"))

        // 2设置option参数
        var option = {
           title: {     //图标题
                text: "ECharts入门"
            },
            tooltip: {},    //提示
            legend: {         
                data: ["一模", "二模"]
            },
            xAxis: {        //x轴
                data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"]
            },
            yAxis: {},      //y轴
            series: [{       //系列数据
                type: "line",
                data: [10, 29, 12, 43, 56, 76, 213],
                name: "一模",
                smooth: true
            }, {
                type: "line",  //线性
                data: [56, 54, 78, 98, 67, 86, 85],
                name: "二模",
                smooth: true,   //平滑的线
            }           
        }

        // 3更新option
        myChar.setOption(option)

效果图:

 笔记:

 echarts官网:Apache ECharts

 

举报

相关推荐

0 条评论