echarts绘制简单的条形图

最新推荐文章于 2024-04-24 22:27:37 发布

FreshHhand

最新推荐文章于 2024-04-24 22:27:37 发布

阅读量2k

点赞数 1

分类专栏：绘制图表文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/FreshHhand/article/details/122398513

版权

绘制图表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、效果：

二、echarts就是个js文件，具体安装：

到这个链接：下载 - Apache ECharts

然后这两个选一个直接下载（复制代码），放到一个js文件，然后像下面代码一样引进来就可

三、代码：

<!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>echarts</title>
    <script src="js/echarts.min.js"></script>
</head>
<body>
     <!-- 准备1个容器div，放置图表 -->
     <div id="demo1" style="width: 600px;height: 400px;"></div>

     <!-- 使用JavaScript绘制图表 -->
 
     <script>
         // 初始化绘制图表的echarts实例
         var myChart = echarts.init(document.querySelector('#demo1'))
 
         // 指定图表的配置
         var option = {
             title:{
                     text:"echarts Demo"
                 },
             tooltip:{},//提示框
             legend:{
                 data:['人数']   //这玩意不知道有什么用？
             },
             xAxis:{
                 data:['vue','react','angular','jquery']    //x轴
             },
             yAxis:{},    //不写的话，y轴默认就标出数字
             //=====图标的数据
             series:[
                 {
                     name:"人数",    //鼠标放上去浮现的内容，跟data一样
                     type:"bar",     //指定条形图类型
                     data:[2000,1500,500,2200]      //分别对应vue、react那几个x轴的数值
                 }
             ]
         }
         // 对实例对象设置配置
         myChart.setOption(option)
     </script>
</body>
</html>

FreshHhand

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
echarts绘制简单的条形图

效果：echarts就是个js文件，具体安装：到这个链接：下载 - Apache ECharts然后这两个选一个直接赋值，放到一个js文件，然后像下面代码一样引进来就可代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=...
复制链接

扫一扫