图表的线体是动态的，3条到6条

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第一个 ECharts 实例</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var obj = {receiveThreeDayList: {echartsXaxis: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],seriesData: [{name: 'A线',color: '#96B557',data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100]}, {name: 'B线',color: '#C0504D',data: [99.05, 98.96, 99.12, 98, 98.77, 99.26, 98.54, 98.94, 98.68, 98.68]},{name: 'C线',color: '#4E7FB9',data: [93, 93, 93, 93, 93, 93, 93, 93, 93, 93]},]}}var seriesData = obj.receiveThreeDayList.seriesData;var echartsXaxis = obj.receiveThreeDayList.echartsXaxis;var res = [];seriesData.map((ele, i) => {res = [...res, ...seriesData[i].data]})let curValue = Math.min(...res) - 10;var seriesBasicData = {type: 'line',itemStyle: {normal: {label: {show: false, //显示formatter: "{c}",position: '', //在上方textStyle: { //文字样式color: '#fff',fontSize: fontSize}}}}}series = seriesData.map((ele, i) => {return {...ele,...seriesBasicData}})var myChart = echarts.init(document.getElementById('main'));var fontSize = 12// 指定图表的配置项和数据var option = {legend: {bottom: "0",textStyle: { color: "#65ABE7", fontSize: fontSize }},"grid": {"top": "10%","bottom": "15%","right": "2%","left": "10%"},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},xAxis: {data: echartsXaxis,axisLine: {show: false},axisTick: {show: false,lineStyle: {color: "#65ABE7",width: 1},},axisLabel: { //X轴标签interval: 0,rotate: 12,show: true,textStyle: {color: '#65ABE7', //字体颜色fontSize: fontSize //字体大小}}},yAxis: [{type: 'value',min: curValue,max: 100,//interval: 2,axisLabel: {formatter: '{value}%',textStyle: {color: '#65ABE7', //字体颜色fontSize: fontSize //字体大小}},axisTick: {show: false},axisLine: {show: false},splitLine: { //Y轴分隔符show: true,lineStyle: {color: '#65ABE7',}}},],series: series};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body></html>

图表的线体是动态的，3条到6条相关推荐

结构体与动态内存（5.11）
结构体与动态内存: 一.结构体 <1>结构体简介特点:构造类型,可以构造出任何程序员想要的类型. 思考:如何定义一个结构体 struct 结构体名 {数据类型成员变量名:数据类型成员 ...
python excel动态图表_那些年做过的动态图表-实用漂亮的Excel动态图表
原标题:那些年做过的动态图表-实用漂亮的Excel动态图表欢迎关注天善智能,我们是专注于商业智能BI,人工智能AI,大数据分析与挖掘领域的垂直社区,学习,问答.求职一站式搞定! 对商业智能BI.大数 ...
【数学建模】基于matlab武汉地铁2号线路线地图动态模拟【含Matlab源码 1092期】
一.获取代码方式获取代码方式1: 完整代码已上传我的资源:[数学建模]基于matlab武汉地铁2号线路线地图动态模拟[含Matlab源码 1092期] 点击上面蓝色字体,直接付费下载,即可. 获取代 ...
[图表]pyecharts-K线图
[图表]pyecharts-K线图先来看代码: import requests from typing import List, Unionfrom pyecharts import options ...
PR标题动画模板创意动态多行标题注释字幕条pr模板
PR标题动画模板创意动态多行标题注释字幕条pr模板这是首映Pro的一个很酷和时髦的模板.该模板包含12个有创意且积极动画的全屏标题动画.这些标题具有动态和创造性地揭示你的文本的动画线条.它们是如此 ...
Javascript特效之可翻阅上一条下一条的动态文字
Javascript特效之可翻阅上一条下一条的动态文字我们经常会看到网站有一些自动跳动的新闻动态,今天来看看新闻动态怎么实现还有怎么手动选择上一条和下一条. 先来看看效果图: 点击箭头则会显示上一条 ...
python 股票图表_k线图分析法_【趣味案例】用Python绘制K线图，一眼看清股市状况...
本文介绍关于[趣味案例]用Python绘制K线图,一眼看清股市状况及神一般的裸k交易法,精髓就这三步,一目了然!精髓就这三步,一目了然!(附图解析)的相关内容. [趣味案例]用Python绘制K线图, ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
malloc和free——结构体中动态内存的管理
C语言中内存的管理主要是依据malloc和free实现的,其中malloc主要是实现内存的分配,而free则是实现内存的释放.虽然这是我们已经很熟悉的,但是还是存在一些问题.特别是当结构体中存在指针的 ...

图表的线体是动态的，3条到6条

图表的线体是动态的，3条到6条相关推荐

最新文章

热门文章