echart四象图图demo

const config = new Map([
[‘line-1’, {
name: ‘line-1’,
data: [[10, -0.1], [20, 0], [40, 0.5], [50, 0.6], [80, 1]]
}],
[‘line-2’, {
name: ‘line-2’,
data: [[10, -0.2], [20, 0.1], [40, 0.6], [50, 0.7], [80, 0.8]]
}],
])
const percent = (val, decimal, mark = ‘’) => {
let result = ‘’
if (val !== null && typeof val === ‘number’) {
result = (val * 100).toFixed(2) + ‘%’
}
return result
}
option = {
animation: false,
grid: {
top: 40,
left: 50,
right: 40,
bottom: 50
},
tooltip: {
trigger: ‘axis’,
formatter: (val) => {
let result = ‘’
if (val && val.length > 0) {
val.forEach(item => {
const { marker, value } = item
const x = value[0]
const y = value[1]
result += ${marker}x: ${x}, y: ${percent(y,2,'-')}<br/>
})
}
return result
debugger
}
},
xAxis: {
name: ‘x’,
min:0,
max: 100,
splitNumber: 20,
splitLine:{
　　　　show:false
　　},
　　axisTick: {
　　 show: false
　　},
　　axisLine: {
　　 symbol:[‘none’,‘arrow’]
　　},
　　offset: -350,
},
yAxis: {
name: ‘y’,
min: -1,
max: 1,
axisLabel: {
formatter: (val) => {
let result = ‘’
if (val && typeof val === ‘number’) {
result = (val * 100).toFixed(2) + ‘%’
}
return result
}
},
splitNumber: 20,
splitLine:{
　　　　show:false
　　},
　　axisTick: {
　　 show: false
　　},
　　axisLine: {
　　 symbol:[‘none’,‘arrow’]
　　},
　　offset: -505
},
dataZoom: [
{
show: true,
type: ‘inside’,
filterMode: ‘none’,
xAxisIndex: [0],
startValue: 0,
endValue: 100
},
{
show: true,
type: ‘inside’,
filterMode: ‘none’,
yAxisIndex: [0],
startValue: -1,
endValue: 1
}
],
series: [
{
name: ‘line-1’,
type: ‘line’,
smooth: true,
label: {
show: true,
position: ‘bottom’,
formatter: (val) => {
let result = ‘’
const { seriesName, dataIndex } = val
const length = config.get(seriesName).data.length
if (dataIndex === length - 1) {
result = seriesName
}
return result
}
},
data: config.get(‘line-1’).data,
},
{
name: ‘line-2’,
type: ‘line’,
smooth: true,
label: {
show: true,
position: ‘bottom’,
formatter: (val) => {
let result = ‘’
const { seriesName, dataIndex } = val
const length = config.get(seriesName).data.length
if (dataIndex === length - 1) {
result = seriesName
}
return result
}
},
data: config.get(‘line-2’).data,
}
]
};

echart四象图图demo相关推荐

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
C#也能PS图片，还能为网站Ajax上传图片同时生成微缩图(附Demo)
C#也能PS图片,还能为网站Ajax上传图片同时生成微缩图(附Demo) 本文旨在与各位朋友们分享我是如何在项目中用C# "ps图片" 为网站生成同比例微缩图的解决方案.如有不足之 ...
echart折线区域图
在引入echart区域折线图时,没有出现对应的区域图当发现引入下面代码到自己的代码中并没有对应的区域图 option = { xAxis: { type: 'category', boundaryG ...
php微信手机端上传图片,手机Wap微信端上传单图和上传多图的DEMO
在手机端或者微信端的论坛或者报名等界面需要上传头像或者多张图片信息等.这个时候就需要用到手机端的上传图片功能,现在微信端也可以使用input file功能了.多图上传使用的都是ajax方式.ajax返 ...
java excel 饼图,java 导入导出excle 和生成柱状图饼状图的demo/excle数据如何转成饼状图...
在EXCEL中,如何把表格中的数据转换成饼状图? 在Excel中,把中的数据转换状图的操作步骤如下: 想转换的数据源,插入饼状图,Excel会自动根据选择的数据源生成饼状图.接下来,可以自定义饼状图的 ...
Echart饼图-圆形图修改重新绘制
首先看看默认效果: 代码如下: option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{na ...
Echarts柱形图折线图合并demo（含图例）
文章目录前言前言柱形图折线图合并demo(含图例) option = {xAxis: {type: 'category',data: [2001, 2002, 2003, 2004, 2005] ...
实现在echart饼状图上显示百分比,数据
最近业务用到了echart,用来展示分析数据挺方便的,这里做一些小笔记. 正文: 要实现在echart饼状图上显示百分比,数据,只需要添加一些属性即可(在series里添加label标签),用法如下: ...
如何使用echart的Graph图实现一个流程控制图
前言: 最近接到一个新需求,需要写一个新模块,这个模块主要是用于查看当前每个生产计划的完成情况,然后所有的生产计划都列在了表格里,而流程控制图用于直观展示选中的生产计划的完成进度 1.首先看一下这个生 ...
世界上有没有无法破解的密码？揭秘量子通信 | 图图是道
来源:文章2020年11月23日发表于<中国日报>的微信公众号图图是道科学顾问 / 中国科学技术大学副教授袁岚峰监制 / 柯荣谊联合监制 / 邢志刚统筹 / 张若琼总 ...

echart四象图图demo

echart四象图图demo相关推荐

最新文章

热门文章