个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我正在使用 Echarts 并创建了一个条形图。我正在尝试添加两条垂直虚线来分隔 Source3 和 Source4 以及另一条垂直虚线来显示 SourceSix 和 SourceSeven 的分隔。我曾尝试将 markLine 弄乱到一个条形图，并在条形图后添加一个 line 作为数据的一部分，但我似乎可以弄清楚这一点。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- including ECharts file -->
<script src="echarts.js"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
// specify chart configuration item and data
var option = {
title: {
text: 'Counts by Intel Source'
},
legend: {
data:['Count']
},
xAxis: {
type: 'category',
data: ['SourceOne','SourceTwo','SourceThree','SourceFour','SourceFive','SourceSix','SourceSeven','SourceEight'],
axisLabel: {
fontWeight: 'bold',
fontSize: 16,
margin: 1,
}
},
yAxis: {
type: 'log',
axisLabel: {
fontWeight: 'bold',
}
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
series: [
{
name: 'SourceOne',
type: 'bar',
stack: 'Chart 1',
color: '#ed2d2e',
data: [1819931,,,,,,,],
},
{
name: 'SourceTwo',
type: 'bar',
stack: 'Chart 1',
color: '#0bb5b5',
data: [,1291396,,,,,,]
},
{
name: 'SourceThree',
type: 'bar',
stack: 'Chart 1',
color: '#662c91',
data: [,,161,,,,,]
},
{
name: 'SourceFour',
type: 'bar',
stack: 'Chart 1',
color: '#0e107b',
data: [,,,133279,,,,]
},
{
name: 'SourceFive',
type: 'bar',
stack: 'Chart 1',
color: '#a11d20',
data: [,,,,1275,,,]
},
{
name: 'SourceSix',
type: 'bar',
stack: 'Chart 1',
color: '#f37d22',
data: [,,,,,119,,]
},
{
name: 'SourceSeven',
type: 'bar',
stack: 'Chart 1',
color: '#008c47',
data: [,,,,,,25224,]
},
{
name: 'SourceEight',
type: 'bar',
stack: 'Chart 1',
color: '#1859a9',
data: [,,,,,,,6798]
},
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
期望的输出:
最佳答案
我已经设法使用以下选项实现与您正在寻找的效果类似的效果:我已将您的 x 轴转换为“值”x 轴，以便我们可以将 markerLines 放在特定位置放在你的系列之间。在这样做时，您需要为每个数据点分配一个 x 轴索引，但它还允许您向 sourceThree 和 sourceSix 添加一个额外的点，这样您就可以在两者之间画一条线作为一种类型:'平均' markLine:
option = {
title : {
text: 'Chart Title',
subtext: 'subtitle'
},
tooltip : {
trigger: 'axis',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
},
formatter : function (params) {
return params.seriesName + ' : [ '
+ params.value[0] + ', '
+ params.value[1] + ' ]';
}
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'log',
axisLine: {
lineStyle: {
color: '#dc143c'
}
}
}
],
series : [
{
name:' SourceOne',
type:'bar',
data:[
[1, 1819931]
]
},
{
name:' SourceTwo',
type:'bar',
data:[
[2, 1291396]
]
},
{
name:' SourceThree',
type:'bar',
data:[
[3, 161], [4, 0]
],
markLine : {
silent: true, // ignore mouse events
data : [
// Horizontal Axis (requires valueIndex = 0)
{type : 'average', name: 'Marker Line', valueIndex: 0, itemStyle:{normal:{color:'#1e90ff'}}},
]
}
},
{
name:' SourceFour',
type:'bar',
data:[
[4, 133279]
]
},
{
name:' SourceFive',
type:'bar',
data:[
[5, 1275]
]
},
{
name:' SourceSix',
type:'bar',
data:[
[6, 119], [7, 0] // this extra data point is the hack to get your marker line in between your series
],
markLine : {
silent: true, // ignore mouse events
label: {show: false},
data : [
// Horizontal Axis (requires valueIndex = 0)
{type: 'average', name: 'Line Marker', valueIndex: 0},
]
}
},
{
name:' SourceSeven',
type:'bar',
data:[
[7, 25224]
]
},
{
name:' SourceEight',
type:'bar',
data:[
[8, 6798]
]
}
]
};
这应该会产生以下图表，您可以通过在此处粘贴该选项来自己尝试: https://echarts.baidu.com/echarts2/doc/example/bar13.html#
关于javascript - Echarts 如何在条形图的特定条之间添加垂直虚线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56396553/
27
4
0
我在我的项目中使用的是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 条数据记录？ 这是我的代码:
我是一名优秀的程序员,十分优秀！