本笔记记录时间:2022-02-19 12:18:42,估计发布到网上是一个月后了。
效果图如下:
对应Echart代码如下:
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
let fundChart = echarts.init(document.getElementById("fundEarningChart"));
// 指定图表的配置项和数据
let fundOption = {
title: {
text: '基金收益',
textStyle:{
color: "white"
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#CCCCCC'
}
},
formatter: function (params){
let value = params[0].value;
value = (value * 100).toFixed(4) + "%";
return value;
}
},
grid: {
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08'],
data: {$fundXData},
axisLine: {
lineStyle: {
color: 'white',
},
onZero: true
},
},
yAxis: {
type: 'value',
axisLabel:{
formatter: function (val){
return val * 100 + "%";
}
},
nameTextStyle: {
color: "white"
},
axisLine: {
lineStyle: {
color: 'white',
}
},
},
series:
{
type: 'line',
data: {$fundYData},
// data: [120, 132, 101, 134, 90, 230, 210],
color:['white']
}
};
// 使用刚指定的配置项和数据显示图表。
fundChart.setOption(fundOption);
window.addEventListener("resize", function (){
fundChart.resize();
});
</script>
对应的HTML代码如下:
<div class="bg-gradient-primary shadow-primary " style="height: 100%; width: 100%;">
<div id="fundEarningChart" style="height: 100%; width: 100%; min-height: 300px"></div>
</div>
其中$fundXData和$fundYData值如下:
console.log({$fundXData});
console.log({$fundYData});
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/123676545
内容来源于网络,如有侵权,请联系作者删除!