本笔记记录时间:-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});