echarts 常用表示例

最新推荐文章于 2025-03-28 14:18:36 发布

阿狸lyinshaofeng

最新推荐文章于 2025-03-28 14:18:36 发布

阅读量968

点赞数

分类专栏：笔记文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/lyinshaofeng/article/details/127565261

版权

本文展示了如何使用Echarts库创建一个包含柱状图和折线图的图表，包括设置标题、提示、图例、X轴、Y轴以及数据。例子中分别展示了睡眠时长、玩游戏时长和上课时长的数据分布，同时在右侧呈现了一个饼图展示不同科目的成绩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       
       <script src="js/echarts.min.js"></script>
       
       <style>
           #container{
               width: 800px;
               height: 600px;
           }
       </style>
   </head>
   <body>
       
       <div id="container"></div>
   </body>
   <script>
       //04 实例化echarts
       // 4.1 创建一个实例
       var echart = echarts.init(document.getElementById("container"))
       // 4.2 定义配置项
       var option = {
           // 图表的标题
           title:{