1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Echarts笔记-折线图定制(Y轴百分数 鼠标移动显示百分数 显示X轴 Y轴值)

Echarts笔记-折线图定制(Y轴百分数 鼠标移动显示百分数 显示X轴 Y轴值)

时间:2021-05-08 12:35:29

相关推荐

Echarts笔记-折线图定制(Y轴百分数 鼠标移动显示百分数 显示X轴 Y轴值)

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。