热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

百度的echarts能否给markLine的label添加背景?

2019独角兽企业重金招聘Python工程师标准项目中遇到如下图的需求查阅echarts配置项文档发现似乎没有markLinelabel的样式选项请问怎么才能给label增加

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

项目中遇到如下图的需求

查阅echarts配置项文档发现似乎没有markLine label的样式选项

请问怎么才能给label增加背景呢?

附:

在线echarts gallery代码
http://gallery.echartsjs.com/…

echarts配置项文档
http://echarts.baidu.com/opti…

参考:https://segmentfault.com/q/1010000013784396

var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';
var gridBgColor = '#f3f3f3';// 数据意义:开盘(open),收盘(close),最低(lowest),最高(highest)
window.data0 = splitData([['2013/5/16', 2221.34,2251.81,2210.77,2252.87],['2013/5/17', 2249.81,2282.87,2248.41,2288.09],['2013/5/20', 2286.33,2299.99,2281.9,2309.39],['2013/5/21', 2297.11,2305.11,2290.12,2305.3],['2013/5/22', 2303.75,2302.4,2292.43,2314.18],['2013/5/23', 2293.81,2275.67,2274.1,2304.95],['2013/5/24', 2281.45,2288.53,2270.25,2292.59],['2013/5/27', 2286.66,2293.08,2283.94,2301.7],['2013/5/28', 2293.4,2321.32,2281.47,2322.1],['2013/5/29', 2323.54,2324.02,2321.17,2334.33],['2013/5/30', 2316.25,2317.75,2310.49,2325.72],['2013/5/31', 2320.74,2300.59,2299.37,2325.53],['2013/6/3', 2300.21,2299.25,2294.11,2313.43],['2013/6/4', 2297.1,2272.42,2264.76,2297.1],['2013/6/5', 2270.71,2270.93,2260.87,2276.86],['2013/6/6', 2264.43,2242.11,2240.07,2266.69],['2013/6/7', 2242.26,2210.9,2205.07,2250.63],['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
]);window.currentPriceData = data0.values.map(v => v[0])function splitData(rawData) {var categoryData = [];var values = []for (var i = 0; i }window.calculateMA = function (dayCount) {var result = [];for (var i = 0, len = data0.values.length; i }option = {backgroundColor: gridBgColor,title: {text: '上证指数',left: 0},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},legend: {data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']},grid: {left: '5%',right: '15%',bottom: '15%'},xAxis: {type: 'category',data: data0.categoryData,scale: true,boundaryGap : false,axisLine: {onZero: false},splitLine: {show: false},splitNumber: 20,min: 'dataMin',max: 'dataMax',axisTick: {// show: false,inside: true},axisLabel: {align: "center",showMinLabel: false}},yAxis: {position: 'left',// offset: 60,scale: true,// splitArea: {// show: true// },splitLine: {show: false},axisTick: {// show: false,inside: true},axisLabel: {inside: true}},dataZoom: [// {// type: 'inside',// start: 50,// end: 100,// zoomLock: true// }// ,{// show: true,// type: 'slider',// y: '90%',// start: 50,// end: 100// }],series: [{name: '日K',type: 'candlestick',data: data0.values,itemStyle: {normal: {color: upColor,color0: downColor,borderColor: upBorderColor,borderColor0: downBorderColor}},markLine: {symbol: ['none', 'none'],// symbolSize: [10, 80],// symbolOffset: [60, 50],data: [// {// name: 'min line on close',// type: 'min',// lineStyle: {// type: "solid"// },// valueDim: 'close'// },// {// name: 'max line on close',// type: 'max',// lineStyle: {// type: "solid"// },// valueDim: 'close'// }]}},{name: 'currentPrice',type: 'line',data: data0.values.map( v => v[0]),smooth: true,lineStyle: {normal: {opacity: 0.1}},markLine: {silent: true,symbol: ['rect'],lineStyle: {type: "solid"},data: [[{symbol: 'arrow',yAxis: 2290.1,xAxis: '2013/6/13',x: '90%',label: {normal: {position: 'start',formatter: '2290.1'}},name: 'Y轴值为2290.1 的水平线'}, {symbol: 'none',x: '5%',yAxis: 2290.1}]]}}]
};


转:https://my.oschina.net/u/1260221/blog/1926716



推荐阅读
  • 本文介绍了两个重要的Node.js库——cache-content-type和mime-types,它们在处理HTTP响应头时非常有用。cache-content-type是基于mime-types构建的,并且实现了缓存机制以提高性能。 ... [详细]
  • BeautifulSoup4 是一个功能强大的HTML和XML解析库,它能够帮助开发者轻松地从网页中提取信息。本文将介绍BeautifulSoup4的基本功能、安装方法、与其他解析工具的对比以及简单的使用示例。 ... [详细]
  • [编程题] LeetCode上的Dynamic Programming(动态规划)类型的题目
    继上次把backTracking的题目做了一下之后:backTracking,我把LeetCode的动态规划的题目又做了一下,还有几道比较难的Medium的题和Hard的题没做出来,后面会继续 ... [详细]
  • 本文探讨了 Boost 库中的 Program Options 组件,这是一个强大的工具,用于解析命令行参数和配置文件。文章介绍了如何正确设置和使用该组件,包括处理复杂选项和负数值的方法。 ... [详细]
  • GCC(GNU Compiler Collection)是GNU项目下的一款功能全面且高效的多平台编译工具,广泛应用于Linux操作系统中。本文将详细介绍GCC的特点及其基本使用方法。 ... [详细]
  • 本文详细介绍了在 Windows 7 上安装和配置 PHP 5.4 的 Memcached 分布式缓存系统的方法,旨在减少数据库的频繁访问,提高应用程序的响应速度。 ... [详细]
  • 优雅地记录API调用时长
    本文旨在探讨如何高效且优雅地记录API接口的调用时长,通过实际案例和代码示例,帮助开发者理解并实施这一技术,提高系统的可观测性和调试效率。 ... [详细]
  • 本文详细介绍了如何在本地环境中安装配置Frida及其服务器组件,以及如何通过Frida进行基本的应用程序动态分析,包括获取应用版本和加载的类信息。 ... [详细]
  • 本文详细介绍了如何在 EasyUI 框架中实现 DataGrid 组件的分页功能,包括配置方法和常见问题的解决方案。 ... [详细]
  • Node.js 断点调试指南
    本文详细介绍了利用Google Chrome DevTools和Visual Studio Code两种工具进行Node.js应用的断点调试技巧。 ... [详细]
  • 本文详细介绍了如何在ReactJS项目中集成Onsen-UI的ActionSheetButton组件,并通过具体示例展示了其使用方法及效果。 ... [详细]
  • 本文详细介绍了如何处理Oracle数据库中的ORA-00227错误,即控制文件中检测到损坏块的问题,并提供了具体的解决方案。 ... [详细]
  • 构建高性能Feed流系统的设计指南
    随着移动互联网的发展,Feed流系统成为了众多社交应用的核心组成部分。本文将深入探讨如何设计一个高效、稳定的Feed流系统,涵盖从基础架构到高级特性的各个方面。 ... [详细]
  • ZOJ 2760 - 最大流问题
    题目链接:How Many Shortest Paths。题目描述:给定一个包含n个节点的有向图,通过一个n*n的矩阵来表示。矩阵中的a[i][j]值为-1表示从节点i到节点j无直接路径;否则,该值表示从i到j的路径长度。输入起点vs和终点vt,计算从vs到vt的所有不共享任何边的最短路径数量。如果起点和终点相同,则输出无穷大。 ... [详细]
  • 深入解析轻量级数据库 SQL Server Express LocalDB
    本文详细介绍了 SQL Server Express LocalDB,这是一种轻量级的本地 T-SQL 数据库解决方案,特别适合开发环境使用。文章还探讨了 LocalDB 与其他轻量级数据库的对比,并提供了安装和连接 LocalDB 的步骤。 ... [详细]
author-avatar
lily--妹妹
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有