eCharts和antv F2画图优化、问题集合

eCharts

1.折线图

(1)折线图平滑、去除折线图的圆点⚪

 series: [
     {
    
    
          name: '邮件营销',
          type: 'line',
          stack: '总量',
          smooth: true,//折线平滑
          symbol: "none",//去折线圆点
          data:  [-10,3.9, 5.9, 11.1, 18.7, 48.3, 69.2]
      },
      {
    
    
          name: '联盟广告',
          type: 'line',
          stack: '总量',
          smooth: true,
          symbol: "none",
          data:  [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
      },
      
  ]

(2)设置坐标轴颜色

 xAxis: {
    
    
      type: 'category',
       boundaryGap: false,
       data:  ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
       axisLabel: {
    
    
           textStyle: {
    
    
               color: '#999999',//坐标值得具体的颜色
           }
       }
   },
   yAxis: {
    
    
       type: 'value',
       axisLabel: {
    
    
           textStyle: {
    
    
               color: '#999999',//坐标值得具体的颜色
           }
       }
   },

2.柱状图

(1)柱状颜色修改、柱状宽度、修改添加顶部数据

series: [{
    
    
    data: [120, 200, 150, 80, 70, 110, 130],
     type: 'bar',
     barWidth : 20,//柱图宽度
     itemStyle: {
    
    
         color: '#6C88DB'//柱状图颜色修改
     },
     label: {
    
    
         show: true,
         position: 'top'//柱状图坐标显示
     },
 }]

antv F2

1.折线图

(1)设置tip、设置tip显示数字固定几位显示

chart.source(data,{
    
    
   tem: {
    
    
     tickCount: 10,
     min:min,
     max:max,
     alias: '每日净值',//tip提示文字
     formatter: function formatter(val) {
    
    
       return val.toFixed(3);//tip固定3位显示比如0.900
     }
   },
 });

(2)设置纵坐标固定几位显示

 chart.axis('tem', {
    
    
  label: function label(text, index, total) {
    
    
     var textCfg = {
    
    };
     textCfg.fontSize='14'
     var textFormat = parseFloat(text).toFixed(3);//纵坐标显示3位小数
     textCfg.text = textFormat;  // 
     return textCfg;
   }
 });