echarts-单柱状图

最新推荐文章于 2024-03-05 11:40:03 发布
最新推荐文章于 2024-03-05 11:40:03 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： linux应用程序之-web前端（html js css）

1、问题背景

      制作一个柱状图，用来统计某商店一年的销售量


2、实现源码

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>echarts-单柱状图</title>  
  6.         <script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>  
  7.         <script type="text/javascript" src="../js/echarts-2.2.7/build/dist/echarts-all.js" ></script>  
  8.         <script>  
  9.             $(document).ready(function(){  
  10.                 var chart = document.getElementById('column');      
  11.                 var echart = echarts.init(chart);  
  12.                 var option = {  
  13.                     title : {  
  14.                         text: '某商店一年的销售量'  
  15.                     },  
  16.                     tooltip : {  
  17.                         trigger: 'axis'  
  18.                     },  
  19.                     legend: {  
  20.                         data:['销售量'],  
  21.                         orient:'vertical'  
  22.                     },  
  23.                     calculable : false,  
  24.                     xAxis : [  
  25.                         {  
  26.                             type : 'category',  
  27.                             data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']  
  28.                         }  
  29.                     ],  
  30.                     yAxis : [  
  31.                         {  
  32.                             type : 'value'  
  33.                         }  
  34.                     ],  
  35.                     series : [  
  36.                         {  
  37.                             name:'销售量',  
  38.                             type:'bar',  
  39.                             data:[67, 89, 52, 69, 96, 34, 135, 16, 32, 20, 64, 33]  
  40.                         }  
  41.                     ]  
  42.                 };  
  43.                   
  44.                 echart.setOption(option);    
  45.                   
  46.                 function eConsole(param)   
  47.                 {  
  48.                     console.log(param);  
  49.                 }  
  50.                   
  51.                 echart.on("click", eConsole);  
  52.             });  
  53.         </script>  
  54.     </head>  
  55.     <body>  
  56.        <div id="column" style="width: 1350px; height: 600px;"></div>  
  57.     </body>  
  58. </html>  

3、实现结果
bingqingsuimeng
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts+vue实现多条统计柱状图表（渐变色柱状图，x、y坐标系修改颜色）项目源码.rar
08-28
echarts+vue实现多条统计柱状图表（渐变色柱状图，x、y坐标系修改颜色）项目源码
ECharts单柱状图、多柱状图、堆叠柱状图
宸0313的博客
07-20 6710
数据格式 var data = { "personOwnList": [ 23, 28, 0, 28, 12, 13, 25 ], "hasBoardList": [ 8, 29, 34, 14, 0, 4, 8 ], "titleList":
【大前端】EChart 多系列柱状图绘制背景图
最新发布
朝拜者
03-05 758
自定义图标适用于任何坐标系，且显示样式可根据需要自定义实现，所以更适用于多系列柱状图绘制背景图的需求自定义图标，起始坐标都是在左上角开始option = {tooltip: {},grid: {},xAxis: [],yAxis: [],series: [},//获取对应类目的axisTick中心点坐标//通过坐标系的宽度和类目数，计算单个类目的背景return {shape: {// 相对左上角坐标},},},name: '直接访问',},
echarts定义单个柱状颜色及边框
weixin_43829673的博客
09-15 2579
echarts定义单个柱状颜色及边框
单系列柱状图案例
GRAY_KEY的博客
05-29 816
单系列柱状图图表效果如下：代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;单系列柱状图案例&lt;/title&gt; &lt;!-- 引入 ECharts 文件 --&gt; &lt;script src=&q
echarts单行柱状图
曾小超的博客
09-30 623
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> </head> <body> <!-- 为EChart.
echarts-省份地图+柱状图组合.zip
03-26
echarts 省份地图+柱状图组合。可以缩放，拖拽，很多朋友在找，现在分享给大家自己，做个参考吧，echarts版本3.3的，
echarts-柱状图
06-26
柱状图：坐标轴刻度与标签对齐。适合于网页，app等。里面的标签内容，需按照要求进行更改。详情可以查看更多关于echart的信息。也可以查看我更多关于echart的介绍和心得。
echarts-柱状图-地图Demo.zip
11-07
Demo描述：柱状图表10s动态更新，地图图标10s动态更新业务相关的省份高亮（根据数据值所属Rang动态分配不同的高亮显示） Demo代码带注释，资源包括js/css/image/html Demo展示地址：...
使用echarts实现立体-柱状图
07-21
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts渲染单个横向柱状图示例
绿绿峰
05-11 2605
众所周知，echarts是百度出的一个开源图表框架，拥有很棒的交互效果和上手便捷。基于配置可以修改成自己想要的样子。这里附上传送门：百度echarts 如果你早已习惯怎么用，这里是它的配置项参考，可以迅速查找一下：echarts配置项手册 然后，下面就是咱所遇到的需求，就像下面这个样子的图表： 然后就开始参考配置项，在页面引入echarts，借助官方的调试编写配置，咱的配置项如下(顺手注释，不多...
ECharts基础柱状图
shaonianmoyou的博客
08-23 9214
。
echarts 柱形图 只有一条数据 靠左显示
qq_37299479的博客
07-14 6035
默认是居中显示
echarts自定义柱状图
weixin_52180195的博客
05-10 1685
const img1 = { a: ‘…/…/assets/images/group010/ruzi.png’, b: ‘…/…/assets/images/group010/ruzi1.png’, }; const img2 = { a: ‘…/…/assets/images/group010/rub.png’, b: ‘…/…/assets/images/group010/rulan1.png’, }; const img3 = { a: ‘…/…/assets/images/group010/ruc.
Echarts-单柱状图组件
weixin_46325225的博客
10-26 465
【代码】Echarts-单柱状图组件。
关于Echarts条形柱状图的方法
Gunba1的博客
04-25 281
echarts条形图相关的点击方法
echarts-----柱状图
grow_的博客
03-15 989
柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等。* Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置。* 从官方示例中找到最接近项目需求的例子，适当修改, 引入到HTML页面中。* 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置。* Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置。* 饼形图修改图表大小是通过 series 对象里面的 radius。* 按照产品需求，来定制图表。
echarts-gl 柱状图
09-10
柱状图是 ECharts-GL 提供的一种图表类型之一。 要绘制柱状图，你可以使用 ECharts-GL 的 API 来设置数据和配置项。下面是一个简单的例子： ```javascript // 导入 ECharts-GL import * as echarts from 'echarts'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值