0
点赞
收藏
分享

微信扫一扫

echarts:在html中使用

无聊到学习 2022-03-15 阅读 116

文章目录

安装

两种安装方式:

  1. 可以在官网下载个版本的包

  2. 也可以使用npm下载

    npm install echarts
    

请添加图片描述
我们只需要echarts.jsecharts.min.js。这是打包好的文件

在html中使用

引入echarts

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

定义外边

<style type="text/css">
    #demo{/* 必须设置宽高*/
        width: 300px;
        height: 200px;
    }
</style>
<div id="demo">
</div>

### 初始化

let  ecDemo = echarts.init(document.getElementById("demo"))

定义配置

let options = {
    // 标题设置
    title:{text:'标图标题'},
    tooltip:{},//提示框
    legend:{// 数据标识
        data:["人数"]
    },
    // x轴标记
    xAxis:{
        data:["vue","react","au",'jq']
    },
    // y轴标记
    yAxis:{},
    // 数据系列
    series:[
        {
            name:'人数',
            type:'bar',
            data:[200,300,100,200]
        }
    ]

}

请添加图片描述

把配置添加到对象中

ecDemo.setOption(options)

效果:

请添加图片描述

结束~,下一节说下如何在vue中使用

总结

写到这里也结束了,在文章最后放上一个小小的福利,以下为小编自己在学习过程中整理出的一个关于 java开发 的学习思路及方向。从事互联网开发,最主要的是要学好技术,而学习技术是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯,更加需要准确的学习方向达到有效的学习效果。

由于内容较多就只放上一个大概的大纲,需要更及详细的学习思维导图的 点击我的Gitee获取。
还有 高级java全套视频教程 java进阶架构师 视频+资料+代码+面试题!

全方面的java进阶实践技术资料,并且还有技术大牛一起讨论交流解决问题。

举报

相关推荐

0 条评论