- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 Echart.js 有一些问题。其实这不是一个大问题,我只是想将数据添加到“categoryB”和“categoryC”。但我不知道该怎么办。我将为您提供此图表的图像、代码和 Github。
github 到此图表:https://github.com/suplex2825/chart-
代码:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="dist/echarts.min.js"></script>
<script type="text/javascript" src="dist2/echarts-gl.min.js"></script>
<script type="text/javascript" src="dist3/ecStat.min.js"></script>
<script type="text/javascript" src="dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="map/js/china.js"></script>
<script type="text/javascript" src="map/js/world.js"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>-->
<script type="text/javascript" src="dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="test/lib/simplex.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = [
{ name: 'e',
value: [
0,
'2016/12/18 00:00:00',
'2016/12/18 00:30:05',
5
],
itemStyle: {
normal: {
color: 'blue'
}
}}, { name: 'e',
value: [
0,
'2016/12/18 01:00:00',
'2016/12/18 01:30:05',
'123wewe'
],
itemStyle: {
normal: {
color: 'blue'
}
}}
];
var dataCount = 10;
var startTime = +new Date();
var categories = ['categoryA', 'categoryB', 'categoryC'];
var types = [
{name: 'JS Heap', color: '#7b9ce1'},
{name: 'Documents', color: '#bd6d6c'},
{name: 'Nodes', color: '#75d874'},
{name: 'Listeners', color: '#e0bc78'},
{name: 'GPU Memory', color: '#dc77dc'},
{name: 'GPU', color: '#72b362'}
];
var anchor = [
{name:'2016/12/18 00:00:00', value:['2016/12/18 00:00:00', 0]},
{name:'2016/12/19 00:00:00', value:['2016/12/19 00:00:00', 0]}
];
// Generate mock data
/*echarts.util.each(categories, function (category, index) {
var baseTime = startTime;
for (var i = 0; i < dataCount; i++) {
var typeItem = types[Math.round(Math.random() * (types.length - 1))];
var duration = Math.round(Math.random() * 10000);
data.push({
name: typeItem.name,
value: [
index,
baseTime,
baseTime += duration,
duration
],
itemStyle: {
normal: {
color: typeItem.color
}
}
});
baseTime += Math.round(Math.random() * 2000);
}
});*/
console.log(data);
function renderItem(params, api) {
console.log(api);
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
}
option = {
tooltip: {
formatter: function (params) {
return params.marker + params.name + ': ' + params.value[3] + ' ms';
}
},
title: {
text: 'Profile',
left: 'center'
},
legend: {
data: ['bar', 'error']
},
dataZoom: [{
type: 'slider',
filterMode: 'weakFilter',
showDataShadow: false,
top: 400,
height: 10,
borderColor: 'transparent',
backgroundColor: '#e2e2e2',
handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
handleSize: 20,
handleStyle: {
shadowBlur: 6,
shadowOffsetX: 1,
shadowOffsetY: 2,
shadowColor: '#aaa'
},
labelFormatter: ''
}, {
type: 'inside',
filterMode: 'weakFilter'
}],
grid: {
height:300
},
xAxis: {
type:'time',
//min: startTime,
scale: true,
//axisLabel: {
// formatter: function (val) {
// return Math.max(0, val - startTime) + ' ms';
// }
// }
},
yAxis: {
data: categories
},
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.8
}
},
encode: {
x: [1, 2],
y: 0
},
data: data
},{
name:'.anchor',
type:'line',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}}
}]
};
;
myChart.on('click',function(p){
console.log('click');
console.log(p)
});
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
最佳答案
您的 renderItem 方法需要返回多个子项。现在,你只是要归还一个 child 。实际上,您可以通过将其包含在您的申报表中来选择要显示的 child 。
总而言之,您需要执行以下操作:
return {
type: 'group',
children: [
{
type: 'rect',
ignore: api.value(0) !== 'Category B' && api.value(0) !== 'Category C',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style(),
},
{
type : 'rect',
ignore : api.value(0) !== 'Category A' && api.value(0) !== 'Category C',
shape : echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
},
{
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style(),
}]
};
希望这有帮助!
关于javascript - 如何在Echart中添加数据到 'categoryB'和 'categoryC'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59102146/
我在我的项目中使用的是echarts Angular版本- ngx-echarts。我想捕捉在折线图上完成的点击事件。 chartClick 或 ngx-echarts 库的任何鼠标事件不适用于折线图
是否可以自定义eCharts中gridLine的颜色? I want to custom the color of horizontal white line 最佳答案 是的,您可以在选项 yAxis
在阅读 ECharts 文档并查看示例后,我还没有发现任何可以根据连续数据维度自动为散点图标记着色的内容。 基本上,我试图绘制这样的东西: 在 ECharts 中解决这个问题的正确方法是什么? 例如修
如何仅在栏顶部显示边框,如照片中所示。下面的代码可以工作,但它的所有边都显示边框。我使用的是echarts type: 'bar', itemStyle: { nor
我想将 echart 保存为图像。如果toolbox.saveAsImage选项设置为 true ,我可以使用工具箱操作来保存图表。但是,我想知道这是否可以以编程方式完成? 最佳答案 这应该通过 ec
我正在构建一个 API 来创建 ECharts 配置,并希望数据标签根据最终用户阅读图表的位置以正确的格式显示。 例如,如果图表中的数字是 10,000,我希望它在北美显示为 10,000,在欧洲显示
我想将 xAxis 设置为 TIME 类型并格式化为 {hh:mm} ,例如 17:45。 在此 demo ,配置工作: xAxis: { type: "time", }, value: [
效果如上图所示: backgroundColor: "rgba(0,0,0,0)", tooltip: { show: true,
目录 一、前言 二、『Echarts』简介 1. 什么是『Echarts』 三、数据可视化 四、『Echarts』
我有两个简单的条形图,包含两个不同的元素,一个位于另一个下方。我使用默认调色板,因此第一个图表显示第一种颜色。现在我希望第二张图表不显示第一种颜色,而是显示第三种颜色。 理论上我想过这样的事情: se
我正在尝试通过设置将 echarts 组件的标题居中 title:{ text: "My Title", textStyle:{ align: "center"
我使用的是echarts 这是我的图表 这张图显示我丢失了一些图例,那么,如何为图例腾出更大的空间,是否可以为图例设置更多的空间?或者如果可以让我的图表变小我该怎么办? 最佳答案 我放了 var op
我使用的是echarts 这是我的图表 这张图显示我丢失了一些图例,那么,如何为图例腾出更大的空间,是否可以为图例设置更多的空间?或者如果可以让我的图表变小我该怎么办? 最佳答案 我放了 var op
下面的树状图有两个级别。我想显示顶级节点(节点 A 和节点 B)的图例。对于我使用过的其他类型的图表,图例可以自动生成,也可以明确定义。使用树状图,看起来一个不是自动生成的,如果我明确定义一个,它永远
有没有办法让 echarts 中的条形 rounded 在顶部?对于前 this example 我能够为 polar 找到选项 roundCap,但无法为 simple bar 图表找到任何东西 最
这是我的 EChart 初始化代码: var option = { tooltip : { trigger: 'axis' }, calculable : true, xAxi
我正在寻找一种在 xAxis 标签上注册点击事件的方法。用户应该能够点击 xAxis 标签(而不是系列),我们应该能够调用一个函数。 无论是直接方式还是间接方式都应该没问题。 最佳答案 您几乎可以收听
我正在使用 echarts 来绘制浮点值,并且我想将系列工具提示中的十进制数字四舍五入到 2 个小数位(保持当前的工具提示样式)。 我的选项 var 是: var truckTurnAroundTim
我目前正在制作一个交互式图表,该图表应该计算商业项目的潜在风险因素。为此,我一直在使用百度 ECharts,并让图表在视觉上工作,但是当数据发生变化时无法让图表更新。 数据来自外部调查问卷,该问卷使用
我使用 Echarts 构建折线图,我需要它平滑。我试过 smooth: true或 smooth: 1.5但是当图表有很多数据时它没有帮助。如何让它处理大约 2000 条数据记录? 这是我的代码:
我是一名优秀的程序员,十分优秀!