echarts 柱状图圆柱_echarts柱状图
bar.png
核心代码：
app.config = {
verticalAlign: 'middle',
position: 'top',
distance: 15,
};
var labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
verticalAlign: app.config.verticalAlign,
formatter: '{c}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
};
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
data: [98, 77, 101, 99, 40]
}
]
};
echarts的demo下载的全代码：
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.config = {
verticalAlign: 'middle',
position: 'top',
distance: 15,
};
var labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
verticalAlign: app.config.verticalAlign,
formatter: '{c}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
};
option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
xAxis: [
{
type: 'category',
axisTick: {show: false},
data: ['2012', '2013', '2014', '2015', '2016']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
data: [98, 77, 101, 99, 40]
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
echarts 柱状图圆柱_echarts柱状图相关推荐
- echarts 柱状图圆柱_Echarts 柱状图配置详解
1.基本柱状图 // 指定图表的配置项和数据 var option = { // ---- 标题 ----- title: { text: '主标题', textStyle: { color: 're ...
- echarts 柱状图圆柱_ECharts象形柱图
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...
- echarts 水桶注水式柱状图
Echarts 水桶注水式柱状图 效果图 代码: <html> <head><title></title> </head> <styl ...
- echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向
echarts图表折线图柱状图多个X轴Y轴以及一个Y轴反向 option1: {color: ['#21E9F6', '#F2CE2E', '#EE2929', '#006DD9', '#1789FF ...
- echarts如何显示多个柱形图_使用echarts画多维柱状图
前言 在此之前,已经跟大家分享了如何使用echarts画折线图.双折线图.柱状图,今天跟大家分享一下使用echarts画多维柱状图. 使用echarts遇到过的坑: 一定要给图表容器添加宽度与高度. ...
- echarts柱状图渐变 堆叠柱状图渐变 小程序 vue
echarts堆叠柱状图渐变 官网实例 堆叠柱状图 堆叠渐变柱状图 import * as echarts from '../../ec-canvas/echarts'; //微信小程序需引用,其他正 ...
- Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
- vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档 起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
- 绘制3D Echarts地图 饼图 堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
最新文章
- 201771010101 白玛次仁 《2018面向对象程序设计（Java）课程学习进度条》
- 中国冶金工业节能减排行业十四五投资动态与运营方向调研报告2022-2027年
- php 跨区域,PHP跨时区的功能实现
- Sublime Text批量删除空白行
- 详解SaaS产品的5类核心指标
- java io .log_namenode无法启动：java.io.FileNotFoundException: .log (Permission denied)
- Django signal
- sublime text3 快速生成方法注释
- Java：JSON解析工具-org.json
- AI精选荐号 | 深度学习 自然语言处理 计算机视觉 python C++
- mysql如何更新一个表中的某个字段值等于另一个表的某个字段值
- BZOJ3561 DZY Loves Math VI
- 电脑屏幕“重影”解决方法
- CSYZDay2模拟题解
- IOS开发-苹果开发者中心 提示 edit phone number
- 计算机网络里的DHCP是什么,路由器的DHCP是什么意思？有什么作用
- NVMe系列专题之一：NVMe技术概述
- android fresco 圆角,圆角和圆圈
- oracle导入.dmp,oracle导入.dmp脚本
- 使用java开发阿里云OSS开放云存储服务