echarts横向柱状图Demo
echarts链接:http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM
代码:
- option = {
- backgroundColor: 'black',
- tooltip: {
- trigger: 'axis',
- backgroundColor: 'rgba(255,255,255,0.8)',
- extraCssText: 'box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);',
- textStyle: {
- color: '#6a717b',
- },
- },
- grid: {
- top: '0.5%',
- left: '3%',
- right: '11%',
- bottom: '2.5%',
- containLabel: true
- },
- yAxis: [{
- type: 'category',
- data: ['a', 'b', 'c', 'd', 'e', 'f', 'g3', 'h', 'i', 'j'],
- inverse: true,
- axisTick: {
- alignWithLabel: true,
- },
- axisLabel: {
- margin: 10,
- textStyle: {
- fontSize: 18,
- color: 'white'
- }
- },
- axisLine: {
- lineStyle: {
- color: '#2548ac'
- }
- },
- }],
- xAxis: [{
- type: 'value',
- axisLabel: {
- margin: 10,
- interval: 1, //横轴信息全部显示
- rotate: -30, //-15度角倾斜显示
- textStyle: {
- fontSize: 18,
- color: 'white',
- }
- },
- axisLine: {
- lineStyle: {
- color: '#192469'
- }
- },
- splitLine: {
- lineStyle: {
- color: '#17367c'
- }
- }
- }],
- series: [{
- name: 'Top 10',
- type: 'bar',
- barWidth: 26,
- data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609],
- label: {
- normal: {
- show: true,
- position: 'insideRight',
- textStyle: {
- color: 'blue', //color of value
- fontSize: 18,
- }
- }
- },
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
- offset: 0,
- color: '#0590eb' // 0% 处的颜色
- }, {
- offset: 1,
- color: '#08e3f1' // 100% 处的颜色
- }], false),
- barBorderRadius: [0, 15, 15, 0],
- shadowColor: 'rgba(0,0,0,0.1)',
- shadowBlur: 3,
- shadowOffsetY: 3
- }
- }
- }]
- };
echarts横向柱状图Demo的更多相关文章
- echarts横向柱状图如果想打开网址
代码: var data = eval(data); var xList = new Array(); var yList = new Array(); var urlList = new Array ...
- echarts —— 绘制横向柱状图(圆角、无坐标轴)
UI给了设计图,看了一眼觉得简单,不就是无序列表布局嘛(ul,li),后来才知道那是echarts图,好吧,样式如下: 代码如下:(渐变色没做) <!DOCTYPE html> <h ...
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- echarts_部分图表配置简介_横向柱状图
横向柱状图主要配置x位置x轴类型y轴类型(轴的类型分两种 1.category(类别)2.value(值)),代码简单(里面有注释)效果如下: var myChart = echarts.init(d ...
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- http://echarts.baidu.com/demo.html#effectScatter-map
http://echarts.baidu.com/demo.html#effectScatter-map
- Echarts堆积柱状图排序问题
Echarts堆积柱状图排序是按照堆积柱状图的柱子高度进行从大到小(或者从小到大)进行排序,方便查阅各坐标情况.以下是我自己研发的方法,有不对的地方敬请谅解,随时欢迎指教. 排序后效果如下图: (1) ...
- Qt+ECharts开发笔记(三):ECharts的柱状图介绍、基础使用和Qt封装Demo
前言 上一篇成功是EChart随着Qt窗口变化而变化,本篇将开始正式介绍柱状图介绍.基础使用,并将其封装一层Qt. 本篇的demo实现了隐藏js代码的方式,实现了一个条形图的基本交互方式,即Qt ...
- Echarts绘制横向柱状图
效果图: 关键配置: 将xAxis的type设置为value, 将yAxis的type设置为category即可实现横向显示
随机推荐
- SRM-供应商关系管理-组织模式
https://wiki.scn.sap.com/wiki/display/SRM/PPOMA_BBP 供应商关系管理 ... 组织模式 PPOMA_BBP 跳到元数据结束 由Ivy Li ...
- LeetCode题解 Permutations II 和 Permutations I ——回溯算法
这个算法感觉还是很陌生的.算法导论里没有讲这个算法,而数据结构与算法分析只用了一节来阐述.我居然跳过去了..尴尬. 笨方法解决的: 第一题: 给定一个元素不重复的数组,枚举出他们的全排列. 方法1:递 ...
- Delphi 集合和字符串互转
集合和字符串互转 集合: type TSocketState = (ssDisconnecting, ssDisconnected, ssConnected, ssConnecting, s ...
- jquery接触初级----- 一种新奇的选择器用法
今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...
- ADO.NET基础知识
ADO.NET定义 ADO是ActiveX Data Objects的缩写,ADO.NET是数据库应用程序和数据源之间沟通的桥梁,主要提供一个面向对象的数据访问架构,用来开发数据库应用程序,就是一组类 ...
- SQL 语句 写法
SELECT * FROM article where userid=4 order by sort asc LIMIT 0,10; 先根据写where 条件,再排序,在LIMIT.
- c 时间 学习
linux #include <stdio.h> #include <time.h> int main(int argc,char **argv) { //两种时间的获取方法 ...
- Structs复习 Path问题
Path问题相对复杂 主要是路劲问题 但结论很简单 就是统一使用绝对路径 jar包 web.xml <?xml version="1.0" encoding="UT ...
- Javascript中构造函数的返回值问题和new对象的过程
首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...
- C# Excel导数据
遇到的几个坑,记录一下. 隐藏表,隐藏行,隐藏列, 单元格合并 => 拆分并填充内容, 显示隐藏列,结果那个列 还是不显示出来,拖动旁边的列也不显示. 结果在旁边的列上,按左右箭头键就出来了,也 ...