技术标签: css Eachart echarts typescript javascript
实例图片:
<div>
<div id="mainbar" class="mainbar"></div>
</div>
eachartBarfunttion() {
let chartDom = <HTMLInputElement>document.getElementById('mainbar');
let myChart = echarts.init(chartDom, null, {
width: 900,//获取父级的宽//初始化默认的宽
height: 400//获取父级的高//初始化默认的高
});
//监听页面的 window.onresize 事件获取浏览器大小改变的事件,
//然后调用 echartsInstance.resize 改变图表的大小
this.resizeBarFun = () => {
console.log("mainbar.clientWidth:", document.getElementById('mainbar').clientWidth)
console.log("mainbar.clientHeight:", document.getElementById('mainbar').clientHeight)
myChart.resize({
width: document.getElementById('mainbar').clientWidth,//获取父级的宽
height: document.getElementById('mainbar').clientHeight//获取父级的高
})
}
window.addEventListener('resize', this.resizeBarFun);
let option;
option = {
// 标题
title: {
text: '3D柱状图',
x: 'center'//横向居中
},
//x轴
xAxis: {
type: 'category',//坐标轴类型
//type: 'value' 数值轴,适用于连续数据。
//type: 'category' 类目轴,适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取,
// 或者可通过 xAxis.data 设置类目数据。,category与data一起使用
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y轴
yAxis: {
type: 'value'
},
// 直角坐标系内绘图网格
grid: {
containLabel: true //设置自适应画布大小状态为开,也可通过设置left左移实现相同效果。这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。
},
// 图例组件
legend: {
bottom: '5%'
},
// 提示框组件。
tooltip: {
},
series: [
{
type: 'bar',//柱状图
barWidth: '40',//柱条的宽度,不设时自适应。
data: [120, 200, 150, 80, 70, 110, 130],
backgroundStyle: {
//是否显示柱条的背景色。通过 backgroundStyle 配置背景样式。
color: 'none',
},
itemStyle: {
//图形样式。
color: {
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [
{
offset: 0,
color: '#00FFFF',
},
{
offset: 0.5,
color: '#00FFFF',
},
{
offset: 0.5,
color: '#11A6D0',
},
{
offset: 1,
color: '#11A6D0',
},
{
offset: 0,
color: '#83bac9',
},
{
offset: 0,
color: 'rgba(17,166,208,0.3)',
},
]
}
},
},
{
z: 2,//控制图形的前后顺序
symbolPosition: 'start',
//symbolPosition:'start':图形边缘与柱子开始的地方内切。
// symbolPosition:'end':图形边缘与柱子结束的地方内切。
// symbolPosition:'center':图形在柱子里居中。
type: 'pictorialBar',//象形柱图是可以设置各种具象图形元素
data: [120, 200, 150, 80, 70, 110, 130],
symbol: 'diamond',柱子显示的样式,'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
symbolOffset: [0, '50%'],
symbolSize: [40, 10],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0, x2: 1, y: 0, y2: 0,
colorStops: [
{
offset: 0,
color: '#00FFFF',
},
{
offset: 0.5,
color: '#00FFFF',
},
{
offset: 0.5,
color: '#11A6D0',
},
{
offset: 1,
color: '#11A6D0',
},
{
offset: 0,
color: '#83bac9',
},
{
offset: 0,
color: 'rgba(17,166,208,0.3)',
},
]
}
},
},
},
{
z: 3,//控制图形的前后顺序
type: 'pictorialBar',
symbolPosition: 'end',
//symbolPosition:'start':图形边缘与柱子开始的地方内切。
// symbolPosition:'end':图形边缘与柱子结束的地方内切。
// symbolPosition:'center':图形在柱子里居中。
data: [120, 200, 150, 80, 70, 110, 130],
symbol: 'diamond',
symbolOffset: [0, '-50%'],
symbolSize: [40, 40 * 0.25],
itemStyle: {
normal: {
color: '#00FFFF',
},
},
},
]
};
option && myChart.setOption(option);
}
文章浏览阅读3.9k次。InputNumber控制用户输入小数点的个数在项目过程中有个需求,需要控制用户输入小数点的个数问题。话不多说上代码://输入框绑定方法<InputNumber style={{ width: '100%' }} formatter={limitDecimals} parser={limitDecimals}/>方法:const limitDecimals = (value: string | number): string => { const reg_antd inputnumber decimalseparator
文章浏览阅读4.1k次,点赞5次,收藏15次。题目:绘制z=x+y,0<x<1,0<y<1,0.5<x+y<1(0.5<z)约束条件下的图像代码:clc;clear;x=0:0.01:1;y=0:0.01:1;[xx,yy]=meshgrid(x,y);[m,n]=size(xx); for i=1:m for j=1:n z(i,j)=x(i)+y..._三元函数图像
文章浏览阅读480次。场景描述:操作系统级别的删除数据文件(/oracle/oradata/ora10g/system1.dbf),而且数据库没有崩溃,仍然处于open状态。原理:在Linux操作系统中,如果文件从操作系统级别被删除掉,之前打开该文件的进程仍然持有相应的文件句柄,所指向的文件仍然可以读写,并且该文件的文件描述符可以从/proc目录中获得。如果关闭数据库,则句柄就会丢失。恢复步骤如..._oracle 数据文件误删 linux
文章浏览阅读10w+次,点赞108次,收藏323次。自学前端刚开始的时候使用Hbuilder,Hbuilder界面设计的很小清新,我特别喜欢,代码提示啥方面做的也特别好,很好上手,作为小白我用了很长一段时间。后来浅浅学习微信小程序开发,得写wxml,Hbilder上没有wxml格式的代码提示,代码高亮等。于是我用了一段时间vscode,在网上按推荐安装了很多花里胡哨的插件呢。给我感觉是不好上手。于是后来又接触了sublime,sublime相比..._vscode 自定义代码颜色、背景颜色、方法名、括号颜色
文章浏览阅读255次。四:图像色彩调整 和图像翻转类似,调整图像的亮度、对比度、饱和度和色相在很多图像识别应用中都不会影响识别结果。所以在训练神经网络模型时,可以随机的调整训练图像的这些属性,从而使训练得到的模型尽可能地受到无关因素的影响。话不多说,上代码了。注意:路径要用英文,不要有中文(一)调整亮度与调整对比度import matplotlib.pyplot as pltimport tensorf..._tensorflow深度学习框架实现了对图像亮度的调整
文章浏览阅读5.6k次。这个标题不知道恰当不恰当,具体的问题就是我在一个现有的项目上创建了一个Web API Controller Class,但是按F5启动调试后,通过给定的路径如“http://localhost:3753/api/values/5”访问Get(int id)方法时,没有反应,设置了断点也进不去。但这个问题在网上又没有找到解决方法,于是又新建了一个ASP.NET Web Application类型的项_.net的web无法访问到控制器
文章浏览阅读911次,点赞2次,收藏4次。迅为iTOP-4412开发板平台,ARM Cortex A9架构,主频1.4GHz-1.6GHz,1GB 双通道 DDR3(2GB 可选),4GB EMMC(16GB 可选),提供多种外接模块,如:RFID模块、继电器模块、CAN总线 RS485总线模块、串口转接板、矩阵键盘模块、AVIN模块、GPS模块、VGA模块、500万摄像头模块、WIFI/蓝牙模块等。拥有丰富的板载接口以及众多配套扩展模块,并提供丰富的学习教程与资源,是嵌入式Linux学习与开发最佳选择。_4412开发入门
文章浏览阅读5.2k次,点赞6次,收藏27次。单体化问题的由来 我们先来说说什么是“单体化”。“单体化”其实指的就是每一个我们想要单独管理的对象,是一个个单独的、可以被选中的实体(Entity);即用鼠标点击时可以显示为不同颜色(称为“高亮”)显示,可以附加属性,可以被查询统计等等。只有具备了“单体化”的能力,数据才可以被管理,而不仅仅是被用来查看。 对于人工建模而言,单体化是一个不言而喻的事情。即在人工建模的过程中,自然会把需要单独管理的_进行模型单体化容易遇到哪些问题
文章浏览阅读1.1k次。snakeyaml自定义pojo写入yml文件时属性排序问题解决。_snakeyaml 写入yaml
文章浏览阅读2.9k次。java.lang.NoClassDefFoundError: de/odysseus/el/ExpressionFactoryImpl at org.jbpm.pvm.internal.script.JuelScriptEngine.(JuelScriptEngine.java:66) at org.jbpm.pvm.internal.script.JuelS_java.lang.noclassdeffounderror: de/odysseus/el/expressionfactoryimpl
文章浏览阅读1.9k次,点赞2次,收藏6次。最近两年安全运营中心这个概念被提到的次数越来越多了,虽然没有一个建设的标准模式,但很多大厂都在提,也号称有了各种落地。那么,到底是怎样呢。_安全运营中心
文章浏览阅读2.8k次。推荐 程序员导航网http://www.je666.comCREATE TABLE IF NOT EXISTS `ylmf_site_search` ( `id` int(11) NOT NULL, `displayorder` int(11) NOT NULL, `pinyin` varchar(255) CHARACTER SET gbk NOT NULL,_je666com