-
2020-12-30 14:47:51
var dataEcstat =[
[1990, 97.50795611],
[1991, -1.47594249]
]
init();functioninit(){
ledgerCountBar();
}functionledgerCountBar(){var ledgerCount = echarts.init(document.getElementById('showLedgerCountBar'));var regressionDemo = ecStat.regression( "linear", dataEcstat, 1);
option={
title: {
text:' 折线图',
subtext:' ',
left:'center'},
tooltip: {
trigger:'item',
formatter:'{a}
{b} : {c}'},xAxis: {
type:'category'},
yAxis: {
type:'value'},
series: [{
name:'数据',
label: {
show:true,
position:"top",
formatter:' {c}'},
data: dataEcstat,
type:'line'},
{
name:'误差趋势拟合',
label: {
show:true,
position:"top",
formatter:' {c}'},
data: regressionDemo.points,
lineStyle: {
color:"#f00"},
type:'line'}
]
};
ledgerCount.setOption(option);
window.οnresize=ledgerCount.resize;
}
更多相关内容 -
eacharts多曲线情况下自定义y轴分割线
2022-03-08 14:22:51采用seres来绘制自定义y轴分割线,我认为是相对而言比较简单的一种办法~*** eacharts多曲线情况下自定义y轴绘制分割线 ***
之前有算过动态去求最大值、最小值、平均值
仙人指路 =》 echarts动态设置y轴刻度的最大值、最小值、平均值如何现在,我们要绘制自定义分割线~
何为自定义分割线?绘制图如下图所示:
绘制第一步:
先绘制出简单的模块:
option = { title: { text: '自定义最大值-最小值-平均值', left: 'left' }, legend: { // left: 'left', icon: 'rect' //矩形 //itemWidth: 25, // 设置宽度 itemHeight: 15, // 设置高度itemGap: 40 ,// 设置间距, }, xAxis: { type: 'category' }, yAxis: { type: 'value' }, series: [ { id: 'AreaChart', type: 'line', symbolSize: 1, itemStyle: { normal: { color: 'rgb(0,153,255)' } }, markArea: { silent: true, itemStyle: { normal: { color: 'rgb(0,153,255,0.2)' } }, data: [ [ { yAxis: 0 }, { yAxis: 0 } ] ] }, markLine: { silent: true, data: [ { yAxis: 0, lineStyle: { type: 'dashed', width: 1.2, color: 'rgb(0,103,255)' } }, { yAxis: 0 }, { yAxis: 0 } ] } }, { name: 'get', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
得到图形如下
我认为 将绘制分割线在series里绘制出来是一种比较简单的办法,你后续可以动态绘制曲线,新增曲线,改变曲线值
绘制第二步
曲线绘制好了,分割线也绘制好了,现在要将自定义的分割线值传入option,改变值
如果将分割线曲线绘制在第一条的时候,可以直接使用option.series[0].方法 去改变
方法如下:
option.series[0].markLine.data[0].yAxis = 200; // 中间高亮额定值线 option.series[0].markLine.data[1].yAxis = 150; // 下箭头 option.series[0].markLine.data[2].yAxis = 250; // 上箭头 option.series[0].markArea.data[0][0].yAxis = 250; // 区域 option.series[0].markArea.data[0][1].yAxis =150; // 区域 myChart.setOption(option);
如果分割线是后续绘制上去的,无法确定曲线位置,可以给分割线曲线加个id
后续找曲线位置的方法如下
//分割线曲线的位置 var areaI = 0; var series = myChart.getOption().series; $.each(series, function(i, serie) { if (serie.id == "AreaChart") { area = true; areaI = i; } }); //绘制曲线 option.series[areaI].markLine.data[0].yAxis =自定义的值; ****省略
做个笔记,放上来,以后我忘了还能看看~
-
echarts平滑折线图添加横向水平线
2019-08-14 15:23:37效果图如下: 写博客不是为了博眼球 是为了记笔记. Smoothlinechart(vul_trend){ let myChart = echarts.init(document.getElementById("Linechart")); let option = { tooltip: { ...效果图如下:
写博客不是为了博眼球 是为了记笔记.
Smoothlinechart(vul_trend){
let myChart = echarts.init(document.getElementById("Linechart"));
let option = {
tooltip: {
trigger: 'axis'
},
color:['#2dbb8a'],
grid: {
left: 0,
right: 0,
bottom: 10,
top:10,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, //折线图前后的间隙
axisTick: {// false 为去掉坐标轴刻线
show: true
},
axisLine:{
show:true,
lineStyle:{
color:'#dcdfe6'
},
},
axisLabel:{
color:'#4e5b5f' //控制横坐标的颜色
},
splitLine:{show: true}, //false 为去除网格线
data: ['01','02','03','04','05','06','07','08','09','10','11','12']
// data: vul_trend.xdata
},
yAxis: {
type: 'value',
axisTick: {// false 为去掉坐标轴刻线
show: true
},
axisLine:{
show:true,
lineStyle:{
color:'#dcdfe6'
},
},
axisLabel:{
color:'#4e5b5f' //控制横坐标的颜色
},
splitLine:{show: true}, //false 为去除网格线
},
series: [
{
name: '漏洞发现总数',
type:'line',
smooth:true,
areaStyle: {},
stack: '总量',
// data: vul_trend.ydata,
data:[3,5,8,10,1,6,8,9,4,5,8,6],
markLine: {
silent: true,
lineStyle: {
normal: {
color: '#333' // 这儿设置安全基线颜色
}
},
data: [{
yAxis: 5 //这儿定义基准线的数值为多少
}],
label: {
normal: {
formatter: '安全\n基线' // 这儿设置安全基线
}
}},
}
]
};
myChart.setOption(option);
}, -
折线、双Y轴、不交叉、highcharts、按照日期分割线
2017-12-08 13:21:04折线、双Y轴、不交叉、highcharts、按照日期分割线 折线、双Y轴、不交叉、highcharts、按照日期分割线 -
echarts折线图常见配置项 分割线虚线样式 显示y轴符号 设置间隔
2020-11-09 10:59:46symbol: 'arrow', // 坐标轴两边的图表类型,不写默认没有 lineStyle: { type: 'dashed' // 坐标轴的分割线类型还有其他关于轴线的样式自行开发吧 } }, axisTick: { interval: 200 }, min: 0, max: 2000,// 强行...option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { name: '坐标轴名称', nameTextStyle: {},// y轴名称的样式 type: 'value', inverse: false,// 把x轴y轴整体旋转180度 boundaryGap: ['20%', '50%'],// 坐标轴两边留白策略 [左右,上下] // 控制坐标轴展示系列文字还是具体数字value是数字 splitLine: { lineStyle: { type: 'dashed' // y轴分割线类型 } }, axisLine: {// 标轴轴线相关设置。 symbol: 'arrow', // 坐标轴两边的图表类型,不写默认没有 lineStyle: { type: 'dashed' // 坐标轴的分割线类型还有其他关于轴线的样式自行开发吧 } }, axisTick: { interval: 200 }, min: 0, max: 2000,// 强行设置最大值,可以达到上方留白的效果 splitNumber: 4,// 想要分隔的段数 // interval: 400, // 强制设置坐标轴分割间隔就是隔多少分一份。 }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', itemStyle: {// 或者可以在这里设置 normal: { lineStyle: { // 重点 type:'dotted' } } } }] };
-
列表推导式在pyechart中添加竖线分割线,将折线根据横轴分成多个区域
2021-08-06 21:27:31[opts.MarkAreaItem(),opts.MarkAreaItem()]控制pyechart的标记区域, 效果代码 .set_series_opts( markarea_opts=opts.MarkAreaOpts( data=[ opts.MarkAreaItem(x=(s,e)) for s,e in zip(index_com_s,... .. -
折线图分隔线设置
2018-07-03 11:53:00又一个神奇的坑,再一次爬坑成功这次是让设置echarts的分隔线颜色先上个echarts的默认颜色图实际需要的是分隔线颜色浅一点,如下图是在哪设置的呢?在一个神奇的地方yAxis: { type: 'value', //分隔线样式 ... -
ECharts折线图分段颜色区分
2021-11-19 16:35:45折线图网址https://echarts.apache.org/examples/zh/editor.html?c=line-aqi 先循环出来在取数据的时候 for (let i = 0; i < res.data.result.data.length; i++) { this.TimeData.push(res.data.result.data[i... -
Android——实现堆叠折线图(动态添加数据)
2021-10-01 12:04:40堆叠折线图效果视频引用描述导包代码分析初始化动态添加数据温度数据湿度数据光照数据动态添加X轴时间值初始化自动刷新时间实现尾言 效果视频 引用 描述 本示例采用的是非常、非常、非常好用的一款第三方SDK——... -
ggplot2:分组折线图
2022-06-07 14:06:31分组折线图 -
echarts中折线图分段显示
2022-05-17 09:50:54直接上图看效果 可以看到绿色和黄色的数据是在同一条线上的,实际上他们是两个不同的数据里面的,但是中间有个衔接点。 实现的基本原理 这里的数据是直接提供了时间和对应的点位信息,计划值是独立的,而纠偏和实际... -
分组折线图、柱状图实现(多条折线图、柱状图同时显示)实现方式
2021-06-04 07:56:07使用MPAndroidChartLibery实现分组折线图和柱状图。一、实现步骤: 1、同样需要 引入mpandroidchartlibrary-2-1-6.jar ;下载地址及介绍见Android中折线图实现方法(各类图表实现) 2、编写实现折线图的封装类:... -
通过ItemDecoration实现RecyclerView分割线
2022-04-19 23:41:09通过ItemDecoration实现RecyclerView分割线 RecyclerView分割线可以有多种实现,最简单的是父view底色+子view差色实现。这里主要用ItemDecoration方式来实现,这样的实现更加具有差异化的可定制性。 创建布局文件 ... -
echart折线图,线性渐变
2021-11-26 15:54:29}) } // 绘制折线图(曲线图) this.lineChart.setOption({ title: { text: '日度收入入账趋势图', textStyle: { color: '#fff', fontSize:"15" }, }, grid: { top: 35, left: '3%', right: '5%', bottom: '5%', ... -
echarts的Y轴的分割线以及线条样式
2022-04-06 08:55:29yAxis: { splitNumber: 5, splitLine: { show: true, lineStyle: { type: 'dotted', color: 'rgba(255, 255, 255,0.3)' } } } ...splitNumber代表Y轴分割的段... lineStyle设置分割线的样式,type:'dotted’设置的 -
[echarts] 设置折线图中折线线条颜色和折线点颜色
2022-03-22 09:27:25(1)设置折线线条颜色 lineStyle:{ color:'#00FF00' } (2)设置折线折点颜色 itemStyle : { normal : { color:'#00FF00' } } series: [ { name:'销售量', -
echarts去掉y轴的分割线
2021-12-16 11:15:10yAxis:[{ splitLine:{ show:false,//不显示分割线 } }] -
echarts-设置折线样式和X轴和Y轴的分割线样式
2017-09-12 10:58:41代码如下: option = { ... text: '折线图堆叠' }, tooltip: { trigger: 'axis' }, legend: { data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'] }, grid: { -
使用html5画简单的折线图
2021-06-08 16:56:18//将渐变效果添加在我们的画布上边 cxt.fillStyle=g; //开始绘制效果 cxt.fillRect(0,0,can1.width,can1.height); //设置要绘制方格的行数和列数 var cols=sale_data.length+1; var rows=4; //计算每一个小方格的... -
前端---HTML5如何制作一个折线图
2021-02-05 00:30:23在学习如何制作折线图,我们先学习一下canvas元素中CanvasRenderingContext2D对象提供的相关方法,通过使用坐标表换,开发者无须繁琐计算每个点的坐标,只需对坐标系整体表换即可.CanvasRenderingContext2D提供了如下的... -
echart折线图 -- 每条线分别对应不同x、y轴数据
2019-05-21 16:55:59通常的折线图横轴默认为类目型’category’,纵轴默认为数值型’value’,这时如果数据中代表横坐标轴的值不一样的话,会产生一个错误的图表,如下图 那是因为echart默认把横坐标当做类别展示(如横坐标所示,它... -
echarts 折线图 设置y轴最小刻度_手把手教你玩转echarts(二)折线图
2020-11-21 21:15:43话不多说,这次给大家带来的是echarts系列之折线图,满满的干货。一个小实例让你对echarts折线图不再陌生!剖析你的心啊呸,错了,是剖析设计图。心有啥好剖析的????简简单单的设计图,那让我们来... -
echart实现分区域填充不同颜色的折线图
2020-12-21 11:31:54闲来无事,帮朋友做了一个echart图表的效果,实现的是分区域填充不同颜色的折线图,就是数据中,0标线以上的是红色,0标线以下的是黄色。先上图:再上代码:function(ec) {// 基于准备好的dom,初始化echarts图表var... -
Android绘制动态折线图
2021-05-26 13:13:07所谓动态折线图,就是折线图能随着手指的滑动进行动态绘制,这里很定会产生动画效果。基于这个效果,这里使用SurfaceView进行制图。实现步奏如下:(1): 这里新建一个绘图ChartView,继承SurfaceView并实现... -
echart折线图双坐标轴刻度线对齐,图例位置调整
2021-04-09 10:54:43[] salesList.map(item => { // x轴数据处理 xData.push(item.days) // 折现图数据处理 line1.push(Number(item.totalPrice.toFixed(2))) line2.push(Number(item.commodityNum.toFixed(2))) line3.push(Number(item... -
eCharts折线图延伸曲线至与y轴相交
2019-02-26 11:49:40先上效果图: 步骤: 1、在数据前面加一组虚拟数据,x轴为空,y轴的值比第一个数据稍小一些 2、数据标签修改第一个不显示 formatter: function(param){ var index = param.dataIndex; if (index === 0) { ... -
iOS 绘制漂亮的折线图
2021-01-12 13:45:53效果图重点是在折线要有阴影,于是 重点 放在 折线发散的阴影 和 拆解第三方 整理出符合需求的面向对象良好的折线模型。一拆解:分三个文件 HFChart,HFChartLineView,HFChartConstHFChart : 折线视图控制器角色 控制... -
echarts 折线图
2021-10-31 16:47:03echarts 折线图 -
d3.js折线图_学习使用D3.js创建折线图
2020-07-25 07:47:05d3.js折线图by Sohaib Nehal 通过Sohaib Nehal 学习使用D3.js创建折线图 (Learn to create a line chart using D3.js) 使用D3.js的功能绘制漂亮的数据表示形式。 (Use the power of D3.js to draw beautiful ...