自定义echarts曲线图里边展示的较小的数据放大

最新推荐文章于 2023-08-14 11:54:40 发布

FLTmiao

最新推荐文章于 2023-08-14 11:54:40 发布

阅读量3.2k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/flting1017/article/details/78983716

版权

这篇博客介绍如何在Echarts自定义曲线图中，针对较小的数据进行放大显示，以便更清晰地呈现数据细节。示例代码展示了通过调整数据比例和设置提示框格式，使得联盟广告、直接访问等数据在图表上更易读。

摘要由CSDN通过智能技术生成

 
  <meta charset="utf-8"> 
 
  <html> 
 
  <div id="main" style="width: 1100px;height:900px;"></div> 
 
  </html> 
 
  <script src="./echarts2.js"></script> 
 
  <script> 
 
  var data1 = [12, 24, 35, 42, 56, 69, 85]; 
 
  var data2 = [1.25,1.55, 1.10, 2.98, 1.45, 2.58, 3.10]; 
 
  var data3 = [150, 232, 201, 154, 190, 330, 410]; 
 
  var data4 = [320, 332, 301, 334, 390, 330, 320]; 
 
  var data5 = [820, 932, 901, 934, 1290, 1330, 1320]; 
 
  var days = ["周一","周二","周三","周四","周五","周六","周日"]; 
 
  var datamap = {
     
  '邮件营销':data1, 
 
  '联盟广告':data2, 
 
  '视频广告':data3, 
 
  '直接访问':data4, 
 
  '搜索引擎':data5, 
 
  } 
 
  // 这个方法是，如果是小于0，转化为百分比去显示 
 
  commoechart(days,datamap,{
     
  // "联盟广告":function(val){
     
  // return Number(val * 100).toFixed(1) + "%" 
 
  // }