百度的echarts-填充2行之间的空间

时间:2019-04-15 17:02:06

标签: javascript charts echarts baidu

我想找到一种方法来绘制ECharts中的两条线,并像这样填充它们之间的空间:

enter image description here

使每一行都有其自己的颜色。根据行的顺序-区域填充为一种颜色或另一种颜色(参见图片)。

是否有本地方法?我发现有人提到import java.io.*; import org.apache.poi.xwpf.usermodel.*; import org.apache.poi.util.Units; import java.util.List; import java.util.ArrayList; import java.net.URL; import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.awt.Dimension; public class CreateWordPicturesInTextRuns { public static void main(String[] args) throws Exception { List<String> pictureURLs = new ArrayList<String>(); pictureURLs.add("https://www.eastcottvets.co.uk/uploads/Animals/gingerkitten.jpg"); pictureURLs.add("https://www.catster.com/wp-content/uploads/2017/12/A-kitten-meowing.jpg"); pictureURLs.add("https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg"); pictureURLs.add("https://d27ucmmhxk51xv.cloudfront.net/media/english/illustration/kitten.jpg"); XWPFDocument document= new XWPFDocument(); XWPFParagraph paragraph = document.createParagraph(); XWPFRun run = paragraph.createRun(); run.setText("The kitten pictures: "); URL url; BufferedImage image; Dimension dim; ByteArrayOutputStream bout; ByteArrayInputStream bin; for (String pictureURL : pictureURLs) { url = new URL(pictureURL); image = ImageIO.read(url); dim = new Dimension(image.getWidth(), image.getHeight()); double width = dim.getWidth(); double height = dim.getHeight(); double scaling = 1.0; if (width > 72*3) scaling = (72*3)/width; //scale width not to be greater than 3 inches bout = new ByteArrayOutputStream(); ImageIO.write(image, "jpeg", bout); bout.flush(); bin = new ByteArrayInputStream(bout.toByteArray()); run = paragraph.createRun(); run.addPicture(bin, XWPFDocument.PICTURE_TYPE_JPEG, "kitten", Units.toEMU(width*scaling), Units.toEMU(height*scaling)); //lock aspect ratio run.getCTR().getDrawingArray(0).getInlineArray(0).addNewCNvGraphicFramePr().addNewGraphicFrameLocks().setNoChangeAspect(true); } FileOutputStream out = new FileOutputStream("CreateWordPicturesInTextRuns.docx"); document.write(out); out.close(); document.close(); } } ,但是没有人提供有关如何从头开始编写它们的说明。.在官方文档页面上也没有找到任何示例。如果有人可以指出我正确的方向,以实现这一目标,我将不胜感激。

在最坏的情况下-如果其他图书馆有如此必要的选择,我会接受的。

我能做的最好的是:

extensions

enter image description here

1 个答案:

答案 0 :(得分:0)

我使用了 areaStyle 来填充轴和数据之间的区域。我会尝试通过将绿色/黄色 areaStyle 添加到绿色系列,将粉红色 areaStyle 添加到红色系列,然后将白色 areaStyle 添加到由其他两个系列的最小值组成的新系列来解决这个问题。结合宽度为 0 的 lineStyle,您可以大致实现草图中的外观,但是,最小系列填充可能也会遮住内部网格线。