Eharts立体柱状图
一下这三个div大小不一样 为了保证每次柱状图渲染正确 添加key
initEchart(index) {
this.myChart = this.createEchartsInstance(`dangerChart${index}`); // var myChart = echarts.init(chartDom);
this.myChart.clear();
let option;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 会canvas的应该都能看得懂，shape是从custom传入的
const xAxisPoint = shape.xAxisPoint;
const c0 = [shape.x, shape.y];
const c1 = [shape.x - 8, shape.y - 8];
const c2 = [xAxisPoint[0] - 8, xAxisPoint[1] - 8];
const c3 = [xAxisPoint[0], xAxisPoint[1]];
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
}
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x, shape.y];
const c2 = [xAxisPoint[0], xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 12, xAxisPoint[1] - 6];
const c4 = [shape.x + 12, shape.y - 6];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
}
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y];
const c2 = [shape.x + 12, shape.y - 6];
const c3 = [shape.x + 3.5, shape.y - 13];
const c4 = [shape.x - 8, shape.y - 8];
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
}
});
// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop); const MAX = [600, 600, 600, 600, 600, 600, 600];
const VALUE = [210.9, 260.8, 204.2, 504.9, 440.5, 400.3, 119.0];
option = {
backgroundColor: 'transparent',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'none'
},
className: 'chartClass',
// eslint-disable-next-line no-unused-vars
formatter: function (params, ticket, callback) {
const item = params[1];
return `<div class="text">未整改 </div>
<div class="fixCount">
<div class="circle"></div>
<div class="count">数量</div>
<div class="num">${item.value}</div>
</div>`;
}
},
grid: {
left: 10,
right: 10,
bottom: 10,
top: 10,
containLabel: true
},
xAxis: {
type: 'category',
data: ['带排查', '超期排查', '逾期未排查'],
axisLine: {
show: true,
lineStyle: {
color: '#BAE7FF'
}
},
offset: 6,
axisTick: {
show: false,
length: 9,
alignWithLabel: true,
lineStyle: {
color: '#7DFFFD'
}
},
axisLabel: {
show: true,
fontSize: 12
}
},
yAxis: {
// min: 0,
// max: 600,
// interval: 200,
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
color: 'rgba(255,255,255,0.1)'
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
fontSize: 12
},
boundaryGap: ['20%', '20%']
},
series: [
{
type: 'custom',
renderItem: function (params, api) {
const location = api.coord([api.value(0), api.value(1)]);
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(47,102,192,.27)'
}
},
{
type: 'CubeRight',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(59,128,226,.27)'
}
},
{
type: 'CubeTop',
shape: {
api,
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: 'rgba(72,156,221,.27)'
}
}
]
};
},
data: MAX
},
{
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)]);
var color =
api.value(1) > 600
? 'red'
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#20B0D6'
},
{
offset: 0.8,
color: '#0681E7'
}
]);
return {
type: 'group',
children: [
{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: color
}
}
]
};
}, data: VALUE
},
{
type: 'bar',
label: {
normal: {
show: false,
position: 'top',
fontSize: 12,
color: '#fff',
offset: [2, -20]
}
},
itemStyle: {
color: 'transparent'
},
tooltip: {},
data: MAX
}
]
};
option && this.myChart.setOption(option, true);
}
Eharts立体柱状图的更多相关文章
- eccharts-gl 3D立体柱状图
echarts-gl继承于echarts echarts-gl官方实例https://echarts.baidu.com/examples/index.html#chart-type-globe 代码 ...
- Echarts 圆形立体柱状图
先放个效果图 const resData = [ { label: "上海", value: 66 }, { label: "北京", value: 26 }, ...
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- echarts-gl 3D柱状图保存为图片，打印
echarts-gl生成的立体柱状图生成图片是平面的,但是需求是3D图并且可以打印,我们的思路是先转成图片,然后再打印,代码如下: 生成3D图 <td>图表分析</td> &l ...
- 【Java EE 学习 74 下】【数据采集系统第六天】【使用Jfreechart的统计图实现】【将JFreechart整合到项目中】
之前说了JFreechart的基本使用方法,包括生成饼图.柱状统计图和折线统计图的方法.现在需要将其整合到数据采集系统中根据调查结果生成三种不同的统计图. 一.统计模型的分析和设计 实现统计图显示的流 ...
- 一秒钟教会你如何 使用jfreechart制作图表，扇形图，柱形图，线型图，时序图，附上详细代码，直接看效果
今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...
- Baidu图表插件--Eharts使用（柱状图）
官网链接:http://echarts.baidu.com/index.html 官网的demo,api都很详细:我就分享下我的学习步骤 首先定义一个显示图标的区域: <div id=" ...
- PHP实现动态生成饼状图、柱状图和折线图(转载)
PHP在图像操作方面的表现非常出色,我们只需借助可以免费得到的GD库便可以轻松实现图.表勾画.下面将分别介绍PHP实现的饼状图.折线图和柱状图以 及他们的使用方法,这几段代码的特点就是不需要再把它们复 ...
- WPF用SkewTransform画3D柱状图
WPF用SkewTransform画3D柱状图 SkewTransform主要是对控件实现一种2-D扭曲,具体内容可以查看以下链接: http://msdn.microsoft.com/zh-cn/l ...
- 空间数据可视化：1. 3D_Bar图表| 空间柱状图
1.Sublime的使用 中文版的配置 https://jingyan.baidu.com/article/ca2d939d1e83feeb6c31cefc.html (百度经验) sublime里边 ...
随机推荐
- [转帖]2.2.1 Lightning 工作原理
https://book.tidb.io/session2/chapter2/lightning-internal.html TiDB Lightning 工具支持高速导入 Mydumper 和 CS ...
- [转帖]jmeter命令大全(命令行模式)
jmeter命令 --? 打印命令行选项并退出 -h. --帮助 打印使用信息和退出 -v. --版本 打印版本信息并退出 -p. --propfile<argument> 要使用的jme ...
- [转帖]linux 部署jmeter&报错处理
一.linux 安装jdk Java Downloads | Oracle 二. linux上传jmeter 2.1 上传jmeter jmeter 下载地址: Apache JMeter - Dow ...
- 【转帖】奇淫技巧 | route命令设置网络优先级
奇淫技巧 | route命令设置网络优先级 https://blog.csdn.net/DynmicResource/article/details/120134745 1. 背景 在生活中的会经常遇 ...
- [转帖]Windows自带硬盘测试工具使用教程
本教程主要讲解Windows自带的硬盘测试工具的使用,不用再安装第三方软件了.到底准不准就不知道啦,下面我们来看看如何使用吧~ 1. 进入cmd 快速进入cmd 主要如果进入后,使用命令直接闪退,就是 ...
- [转帖]Linux中的用户和用户组
https://www.jianshu.com/p/76700505cac4 1,Linux中的用户分类 超级用户:拥有对系统的最高管理权限,默认是root用户. 普通用户:只能对自己目录下的文件进行 ...
- redis 6源码解析之 object
redis对象作为redis存储的基本单元,对应redisDb->dict 中的dictEntry->key和dictEntry->val. 更全面的图谱 源码解析参见:object ...
- 【贪心】AGC018C Coins
Problem Link 现在有 \(X+Y+Z\) 个人,第 \(i\) 个人有三个权值 \(a_i,b_i,c_i\),现在要求依次选出 \(X\) 个人,\(Y\) 个人和 \(Z\) 个人(一 ...
- vue3动态路由的addRoute和removeRoute使用
为什么需要有动态路由 有些时候,我们不同的身份角色,我们希望可以展示不同的菜单. 比如说:普通用户只有展示A菜单,管理员有A,B,C菜单 这个时候,我们就需要动态路由了! Vue2和vue3的区别 V ...
- 深入探索OCR技术：前沿算法与工业级部署方案揭秘
深入探索OCR技术:前沿算法与工业级部署方案揭秘 注:以上图片来自网络 1. OCR技术背景 1.1 OCR技术的应用场景 OCR是什么 OCR(Optical Character Recogniti ...