2021年8月17日

外汇网站持仓数据分布图表echarts实现代码实例


在接到最近的一个切图项目中遇到的,图表的实现主流方法无非两种echarts,和highcharts,前者是百度开发的贡献给了apache运营,后者是国外比较知名的一款,但是在国内echarts使用的要多一些,切图网qietu.com在图表方面的开发定制也有不少的心得,比如下面这款,这个官网上没有这个效果,但是柱形图比较接近,只有靠二开来实现无限接近于设计稿的效果,后面附核心代码。

唯一美中不足的是,图表中的参考线和方形的表格背景没能用图表自身的参数来实现,而是退而求其次选择了用css代码来弥补,好在整体效果和设计稿完全一样。


var myChart = echarts.init(document.getElementById('main'));

option = {
//backgroundColor:'#fafafa',
color:["#3b96ff","#f16862"],
// tooltip: {
// trigger: 'axis',
// axisPointer: { // 坐标轴指示器,坐标轴触发有效
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// },
// formatter: (params) => {
// if (!params.length) return ''
// let s = params[0].axisValueLabel + '<br/>'
// for (const iterator of params) {
// // 如果是负数则反转
// let d = iterator.data < 0 ? -iterator.data : iterator.data
// s += iterator.marker + iterator.seriesName + ':' + d + '<br/>'
// }
// return s
//}
// },
tooltip: {
//trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: (params) => {


return "价格区间:1.19252~1.19252<br/>仓位占比:3.5%";
}
},
legend: {
show:false,
data: ['获利', '亏损']
},
grid: {
left: '5',
right: '5',
bottom: '20px',
top:10,
//containLabel: true
},
xAxis: [
{

type: 'value',
axisLine:{
show:false,
lineStyle:{
type:"dotted",
color:'blue'
}
},
axisTick: {
show: false
},
splitLine:{
show: false,
lineStyle:{
type:"solid",
color:"#d7d7d7"
}
},
splitArea : {show : false},//保留网格区域
axisLabel:{
show:false,
formatter: '{value} kg',
textStyle:{
fontSize:25,
color:'blue'
}
},
// axisLabel: {
// formatter: (value) => {
// // 负数取反 显示的就是正数了
// if (value < 0) return -value
// else return value
// }
// }
}
],
yAxis: [
{
axisLine:{
show:false,
lineStyle:{
type:"dotted",
color:'blue'
}
},
axisTick: {
show: false
},
splitLine:{
show: false,
lineStyle:{
type:"solid",
color:"#d7d7d7"
}
},
splitArea : {show : false},//保留网格区域
axisLabel:{
show:false,
formatter: '{value}',
textStyle:{
fontSize:13,
color:'#333'
}
},
type: 'category',
axisTick: {
show: false
},
position:"right",
//data: ['1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036','1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036','1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036','1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036','1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036','1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036', '1.19036']
}
],
series: [
{
name: '亏损',
type: 'bar',
stack: '总量',
barWidth : 8,//柱图宽度
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[8, 0, 0, 8]
}
},
barGap:'0%',
label: {
show: false
},
data: [-20, -32, -10, -34, -20, -30, -10,-20, -32, -10, -34, -20, -30, -10,-20, -32, -10, -34, -90, -30, -10,-20, -32, -10, -34, -10, -30, -10,-20, -32, -10, -34, -10, -30, -10,-20, -32, -10, -34, -10]

},
{
name: '获利',
type: 'bar',
stack: '总量',
barWidth : 8,//柱图宽度
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[0, 8, 8, 0]
}
},
barGap:'0%',
label: {
show: false,
position: 'left',
formatter: (value) => {
// 值都是负数的 所以需要取反一下
return -value.data
}
},
data: [20, 30, 41, 74, 20, 50, 20,20, 30, 41, 74, 90, 50, 20,20, 30, 41, 74, 20, 50, 20,20, 30, 41, 74, 20, 50, 20,20, 30, 41, 74, 90, 50, 20,20, 30, 41, 74, 20]

}
]
};

// 为echarts对象加载数据
myChart.setOption(option);

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》