echarts 柱状图圆柱_Echarts 柱状图配置详解
1、基本柱状图
// 指定图表的配置项和数据
var option = {
// ---- 标题 -----
title: {
text: '主标题',
textStyle: {
color: 'red'
},
subtext: '副标题',
subtextStyle: {
color: 'blue'
},
padding: [0, 0, 10, 100] // 位置
},
// ---- legend ----
legend: {
type: 'plain', // 图列类型，默认为 'plain'
top: '1%', // 图列相对容器的位置 top\bottom\left\right
selected: {
// '销量': true // 图列选择，图形加载出来会显示选择的图列，默认为true
},
textStyle: { // 图列内容样式
color: '#fff', // 字体颜色
backgroundColor: 'black' // 字体背景色
},
tooltip: { // 图列提示框，默认不显示
show: true,
color: 'red'
},
data: [ // 图列内容
{
name: '销量',
icon: 'circle',
textStyle: {
color: 'red', // 单独设置某一个图列的颜色
backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
}
}
]
},
// --- 提示框 ----
tooltip: {
show: true, // 是否显示提示框，默认为true
trigger: 'item', // 数据项图形触发
axisPointer: { // 指示样式
type: 'shadow',
axis: 'auto'
},
padding: 5,
textStyle: { // 提示框内容的样式
color: '#fff'
}
},
// ---- gird区域 ---
gird: {
show: false, // 是否显示直角坐标系网格
top: 80, // 相对位置 top\bottom\left\right
containLabel: false, // gird 区域是否包含坐标轴的刻度标签
tooltip: {
show: true,
trigger: 'item', // 触发类型
textStyle: {
color: '#666'
}
}
},
// ------ X轴 ------
xAxis: {
show: true, // 是否显示
position: 'bottom', // x轴的位置
offset: 0, // x轴相对于默认位置的偏移
type: 'category', // 轴类型， 默认为 'category'
name: '月份', // 轴名称
nameLocation: 'end', // 轴名称相对位置
nameTextStyle: { // 坐标轴名称样式
color: 'red',
padding: [5, 0, 0, -5]
},
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 0, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ------ 线 ---------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴 刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: { // 默认取轴线的样式
color: 'red',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: 'red' // 默认取轴线的颜色
},
splitLine: { // gird区域中的分割线
show: false, // 是否显示
lineStyle: {
// color: 'red',
// width: 1,
// type: 'solid'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
position: 'left', // y轴位置
offset: 0, // y轴相对于默认位置的偏移
type: 'value', // 轴类型，默认为 ‘category’
name: '销量', // 轴名称
nameLocation: 'end', // 轴名称相对位置value
nameTextStyle: { // 坐标轴名称样式
color: '#fff',
padding: [5, 0, 0, 5] // 坐标轴名称相对位置
},
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 270, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- 箭头 -----
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ----- 线 -------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴的刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
color: 'red', // 默认取轴线的颜色
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴的标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: 'red', // 默认轴线的颜色
},
splitLine: { // gird 区域中的分割线
show: true, // 是否显示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
}
},
// ------- 内容数据 -------
series: [
{
name: '销量', // 序列名称
type: 'bar', // 类型
legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
},
itemStyle: { // 图形的形状
color: 'blue',
barBorderRadius: [18, 18, 0 ,0]
},
barWidth: 20, // 柱形的宽度
barCategoryGap: '20%', // 柱形的间距
data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300, 1200]
}
]
};
html代码
ECharts
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2、折叠柱状图
// 指定图表的配置项和数据
option = {
title: {
text: "",
textStyle: {
color: "#436EEE",
fontSize: 17
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data:[
{
name: '政策法规',
icon: 'circle',
textStyle: {
color: 'red', // 单独设置某一个图列的颜色
backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
}
},
{
name: '经办规程',
icon: 'circle',
textStyle: {
color: 'red', // 单独设置某一个图列的颜色
backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
}
},
{
name: '业务场景模拟',
icon: 'circle',
textStyle: {
color: 'red', // 单独设置某一个图列的颜色
backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
}
},
{
name: '常见问题',
icon: 'circle',
textStyle: {
color: 'red', // 单独设置某一个图列的颜色
backgroundColor: '#fff' // 单独设置某一个图列的字体背景色
}
}
]
},
//x轴显示
xAxis: {
data: [20180611, 20180612, 20180613, 20180614, 20180615, 20180616, 20180617],
show: true, // 是否显示
position: 'bottom', // x轴的位置
offset: 0, // x轴相对于默认位置的偏移
type: 'category', // 轴类型， 默认为 'category'
name: '月份', // 轴名称
nameLocation: 'end', // 轴名称相对位置
nameTextStyle: { // 坐标轴名称样式
color: 'red',
padding: [5, 0, 0, -5]
},
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 0, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ------ 线 ---------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴 刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: { // 默认取轴线的样式
color: 'red',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: 'red' // 默认取轴线的颜色
},
splitLine: { // gird区域中的分割线
show: false, // 是否显示
lineStyle: {
// color: 'red',
// width: 1,
// type: 'solid'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
},
// show: false
},
// ------ y轴 ----------
yAxis: {
show: true, // 是否显示
position: 'left', // y轴位置
offset: 0, // y轴相对于默认位置的偏移
type: 'value', // 轴类型，默认为 ‘category’
name: '销量', // 轴名称
nameLocation: 'end', // 轴名称相对位置value
nameTextStyle: { // 坐标轴名称样式
color: '#fff',
padding: [5, 0, 0, 5] // 坐标轴名称相对位置
},
nameGap: 15, // 坐标轴名称与轴线之间的距离
nameRotate: 270, // 坐标轴名字旋转
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- 箭头 -----
symbol: ['none', 'arrow'], // 是否显示轴线箭头
symbolSize: [8, 8], // 箭头大小
symbolOffset: [0, 7], // 箭头位置
// ----- 线 -------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐标轴的刻度
show: true, // 是否显示
inside: true, // 是否朝内
length: 3, // 长度
lineStyle: {
color: 'red', // 默认取轴线的颜色
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐标轴的标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: 'red', // 默认轴线的颜色
},
splitLine: { // gird 区域中的分割线
show: true, // 是否显示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed'
}
},
splitArea: { // 网格区域
show: false // 是否显示，默认为false
}
},
tooltip: {
position: ['50%', '50%'],
padding: [5, 10]
},
grid: {
left: '0%'
},
series: [
{
name: "政策法规",
type: "bar",
stack: "业务",//折叠显示
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
//显示颜色
itemStyle:{
normal:{color:"blue"}
},
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
}
},
{
name: "经办规程",
type: "bar",
stack: "业务",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
},
itemStyle:{
normal:{color:"#FF8849"}
}
},
{
name: "业务场景模拟",
type: "bar",
stack: "业务",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
},
itemStyle:{
normal:{color:"#3FBB49"}
}
},
{
name: "常见问题",
type: "bar",
stack: "业务",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 图形上的文本标签
show: false,
position: 'insideTop', // 相对位置
rotate: 0, // 旋转角度
color: '#eee'
},
itemStyle:{
normal:{color:"#56C4A5"}
},
barCateGoryGap: 15
}
]
};
html调用代码
ECharts
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params);
});
echarts 柱状图圆柱_Echarts 柱状图配置详解相关推荐
- echarts 柱状图圆柱_echarts柱状图
bar.png 核心代码: app.config = { verticalAlign: 'middle', position: 'top', distance: 15, }; var labelOpt ...
- vue中使用ECharts实现中国地图配置详解（配官方配置地址）
前言: 1.实现自定义左下角的视觉映射组件(包括自定义颜色.文字.图元大小) 2.实现自定义悬浮提示框 如下图所示: 实现步骤: 一.在vue中安装echarts 1.npm install echa ...
- Echars折线配置详解
Echars折线配置详解 比如做成如下效果图: 所有的配置如下: var option = {tooltip: { // 提示框trigger: 'axis', // 触发类型(坐标轴触发)alway ...
- Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
- elasticsearch-.yml（中文配置详解）
此elasticsearch-.yml配置文件,是在$ES_HOME/config/下 elasticsearch-.yml(中文配置详解) # ======================== El ...
- (ASA) Cisco Web ××× 配置详解 [三部曲之一]
(ASA) Cisco Web ××× 配置详解 [三部曲之一] 注意:本文仅对Web×××特性和配置作介绍,不包含SSL ×××配置,SSL ×××配置将在本版的后续文章中进行介绍. 首先,先来 ...
- mybatis 同名方法_MyBatis（四）：xml配置详解
目录 1.我们将 数据库的配置语句写在 db.properties 文件中 2.在 mybatis-configuration.xml 中加载db.properties文件并读取 通过源码我们可以分析 ...
- logback节点配置详解
logback节点配置详解 一:根节点 <configuration></configuration> 属性 : debug : 默认为false ,设置为true时,将打印出 ...
- PM配置详解之一：企业结构
1.维护计划工厂 功能说明 在公司结构中定义维护工厂(通常已经作为后勤工厂存在)和维护计划工厂(简称计划工厂). 维护工厂:设备所安装的位置,如某机组安装在合营公司,那么合营公司就是此机组的维护工厂, ...
最新文章
- deepin linux 命令行_ThinkPad E480安装Manjaro-Deepin备忘录
- redis日志_「漫画」谈谈Redis持久化
- shell经典脚本或命令行
- 主键primary key和唯一索引unique index
- 动态so库的链接：运行时链接和编译时链接
- Visual Studio SnippetDesigner使用
- python3.6 django部署_Apache2+Django+Python3.6部署-
- 从需求到交付——论敏捷过程中的需求管理
- 关键路径-stl版_A*算法与蚁群算法相结合的无人艇巡逻路径规划
- 不会Netty，你也永远不会熟悉Java
- 企业计算机仿真技术应用,基于计算机仿真技术的企业生产物流系统优化研究
- 天正电气图例_天正电气CAD教程之文件布图篇（内附往期秘籍）
- AntD Selected 多选
- Piranha介绍：过期代码自动删除的开源工具
- SpringBoot启动报错：Failed to introspect Class [XXX] from ClassLoader
- 暖火柴打一数字_火柴里的天堂
- GeniePath：Graph Neural Networks with Adaptive Receptive Paths
- 程序员需知的13个国内博客社区，建议收藏
- 【C语言】文件操作详解
- 转载-解释路由包ping的情况