精华内容
下载资源
问答
  • ...现在这个统计还要解决几个问题:支持多个系列、为多系列加入...现在的数据是单条折线,如果有多条折线,那么需要为它指定不同的名称和颜色,为它们指定图例,指定图例以后,我们通过图例来控制折线显示


    http://www.daliane.com/d3_js_xue_xi_bi_ji_qi_duo_xi_lie_zhe_xian_tu_yu_tu_li/


    要解决的问题

    现在这个统计图还要解决几个问题:支持多个系列、为多系列加入图例。

    现在的数据是单条折线,如果有多条折线,那么需要为它指定不同的名称和颜色,为它们指定图例,指定图例以后,我们通过图例来控制折线的显示和隐藏。

    通过多维数组产生折线

    首先调整产生数据系列的函数,使它产生不定长度的随机数,每一个系列为一个数组,并指定折线名称。

    //产生随机数据
    function getData()
    {
    var lineNum=Math.round(Math.random()*10)%3+1;
    var dataNum=Math.round(Math.round(Math.random()*10))+5;
    oldData=dataset;
    dataset=[];
    xMarks=[];
    lineNames=[];for(i=0;i<dataNum;i++)
    {
    xMarks.push("标签"+i);
    }
    for(i=0;i<lineNum;i++)
    {
    var tempArr=[];
    for(j=1;j<dataNum;j++)
    {
    tempArr.push(Math.round(Math.random()*h));
    }
    dataset.push(tempArr);
    lineNames.push("系列"+i);
    }
    }

    我们希望能够自由的添加折线,最好的办法就是将折线封装起来,做成一个折线类,每次添加删除就调用它的相关方法就行了,定义折线类,它有4个方法,init是第一次产生折线时候调用,它初始化内部对象,movieBegin在数据更换之前调用,将图表置于动画开始状态,reDraw开始数据动画,remove将折线从画布清除。

    //定义折线类
    function CrystalLineObject()
    {
    this.group=null;
    this.path=null;
    this.oldData=[];this.init=function(id)
    {
    var arr=dataset[id];
    this.group=svg.append("g");var line = d3.svg.line()
    .x(function(d,i){return xScale(i);})
    .y(function(d){return yScale(d);});

    //添加折线
    this.path=this.group.append("path")
    .attr("d",line(arr))
    .style("fill","none")
    .style("stroke-width",1)
    .style("stroke",lineColor[id])
    .style("stroke-opacity",0.9);

    //添加系列的小圆点
    this.group.selectAll("circle")
    .data(arr)
    .enter()
    .append("circle")
    .attr("cx", function(d,i) {
    return xScale(i);
    })
    .attr("cy", function(d) {
    return yScale(d);
    })
    .attr("r",5)
    .attr("fill",lineColor[id]);
    this.oldData=arr;
    };

    //动画初始化方法
    this.movieBegin=function(id)
    {
    var arr=dataset[i];
    //补足/删除路径
    var olddata=this.oldData;
    var line= d3.svg.line()
    .x(function(d,i){if(i>=olddata.length) return w-padding; else return xScale(i);})
    .y(function(d,i){if(i>=olddata.length) return h-foot_height; else return yScale(olddata[i]);});

    //路径初始化
    this.path.attr("d",line(arr));

    //截断旧数据
    var tempData=olddata.slice(0,arr.length);
    var circle=this.group.selectAll("circle").data(tempData);

    //删除多余的圆点
    circle.exit().remove();

    //圆点初始化,添加圆点,多出来的到右侧底部
    this.group.selectAll("circle")
    .data(arr)
    .enter()
    .append("circle")
    .attr("cx", function(d,i){
    if(i>=olddata.length) return w-padding; else return xScale(i);
    })
    .attr("cy",function(d,i){
    if(i>=olddata.length) return h-foot_height; else return yScale(d);
    })
    .attr("r",5)
    .attr("fill",lineColor[id]);

    this.oldData=arr;
    };

    //重绘加动画效果
    this.reDraw=function(id,_duration)
    {
    var arr=dataset[i];
    var line = d3.svg.line()
    .x(function(d,i){return xScale(i);})
    .y(function(d){return yScale(d);});

    //路径动画
    this.path.transition().duration(_duration).attr("d",line(arr));

    //圆点动画
    this.group.selectAll("circle")
    .transition()
    .duration(_duration)
    .attr("cx", function(d,i) {
    return xScale(i);
    })
    .attr("cy", function(d) {
    return yScale(d);
    })
    };

    //从画布删除折线
    this.remove=function()
    {
    this.group.remove();
    };
    }

    我们修改了drawChart()函数,使得它针对不定数量的折线作出处理,如果少了,就加上,否则删除多余的线条。

    for(i=0;i<dataset.length;i++)
    {
    if(i<currentLineNum)
    {
    //对已有的线条做动画
    lineObject=lines[i];
    lineObject.movieBegin(i);
    }
    else
    {
    //如果现有线条不够,就加上一些
    var newLine=new CrystalLineObject();
    newLine.init(i);
    lines.push(newLine);
    }
    }//删除多余的线条,如果有的话
    if(dataset.length<currentLineNum)
    {
    for(i=dataset.length;i<currentLineNum;i++)
    {
    lineObject=lines[i];
    lineObject.remove();
    }
    lines.splice(dataset.length,currentLineNum-dataset.length);
    }

    为系列添加图例

    我们添加一个图例元素到画布,并且将图例的增删改做成了一个函数,代码如下:

    //添加图例
    function addLegend()
    {
    var textGroup=legend.selectAll("text")
    .data(lineNames);textGroup.exit().remove();legend.selectAll("text")
    .data(lineNames)
    .enter()
    .append("text")
    .text(function(d){return d;})
    .attr("class","legend")
    .attr("x", function(d,i) {return i*100;})
    .attr("y",0)
    .attr("fill",function(d,i){ return lineColor[i];});

    var rectGroup=legend.selectAll("rect")
    .data(lineNames);

    rectGroup.exit().remove();

    legend.selectAll("rect")
    .data(lineNames)
    .enter()
    .append("rect")
    .attr("x", function(d,i) {return i*100-20;})
    .attr("y",-10)
    .attr("width",12)
    .attr("height",12)
    .attr("fill",function(d,i){ return lineColor[i];});

    legend.attr("transform","translate("+((w-lineNames.length*100)/2)+","+(h-10)+")");
    }

    这个是常规的功能,代码虽然多,但是不难看懂,现在我们的折线图如下图所示。

    7_1

    察看新的动画演示效果:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title>画一个折线图</title>
      <script type="text/javascriptsrc="js/d3.js"></script>
      </head>
      <style type="text/css">
      body{
      height: 100%;
      }
      .title{font-family:Arial,微软雅黑;font-size:18px;text-anchor:middle;}
      .subTitle{font-family:Arial,宋体;font-size:12px;text-anchor:middle;fill:#666}
       
      .axis path,
      .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
      }
      .axis text {
      font-family: sans-serif;
      font-size: 11px;
      fill:#999;
      }
       
      .inner_line path,
      .inner_line line {
      fill: none;
      stroke:#E7E7E7;
      shape-rendering: crispEdges;
      }
       
      .legend{font-size: 12px; font-family:Arial, Helvetica, sans-serif}
       
      </style>
      <body>
      <script type="text/javascript">
      var dataset=[];
      var lines=[]; //保存折线图对象
      var xMarks=[];
      var lineNames=[]; //保存系列名称
      var lineColor=["#F00","#09F","#0F0"];
      var w=600;
      var h=400;
      var padding=40;
      var currentLineNum=0;
       
      //用一个变量存储标题和副标题的高度,如果没有标题什么的,就为0
      var head_height=padding;
      var title="收支平衡统计图";
      var subTitle="2013年1月 至 2013年6月";
       
      //用一个变量计算底部的高度,如果不是多系列,就为0
      var foot_height=padding;
       
      //模拟数据
      getData();
       
      //判断是否多维数组,如果不是,则转为多维数组,这些处理是为了处理外部传递的参数设置的,现在数据标准,没什么用
      if(!(dataset[0] instanceof Array))
      {
      var tempArr=[];
      tempArr.push(dataset);
      dataset=tempArr;
      }
       
      //保存数组长度,也就是系列的个数
      currentLineNum=dataset.length;
       
      //图例的预留位置
      foot_height+=25;
       
      //定义画布
      var svg=d3.select("body")
      .append("svg")
      .attr("width",w)
      .attr("height",h);
       
      //添加背景
      svg.append("g")
      .append("rect")
      .attr("x",0)
      .attr("y",0)
      .attr("width",w)
      .attr("height",h)
      .style("fill","#FFF")
      .style("stroke-width",2)
      .style("stroke","#E7E7E7");
       
      //添加标题
      if(title!="")
      {
      svg.append("g")
      .append("text")
      .text(title)
      .attr("class","title")
      .attr("x",w/2)
      .attr("y",head_height);
       
      head_height+=30;
      }
       
      //添加副标题
      if(subTitle!="")
      {
      svg.append("g")
      .append("text")
      .text(subTitle)
      .attr("class","subTitle")
      .attr("x",w/2)
      .attr("y",head_height);
       
      head_height+=20;
      }
       
      maxdata=getMaxdata(dataset);
       
      //横坐标轴比例尺
      var xScale = d3.scale.linear()
      .domain([0,dataset[0].length-1])
      .range([padding,w-padding]);
       
      //纵坐标轴比例尺
      var yScale = d3.scale.linear()
      .domain([0,maxdata])
      .range([h-foot_height,head_height]);
       
      //定义横轴网格线
      var xInner = d3.svg.axis()
      .scale(xScale)
      .tickSize(-(h-head_height-foot_height),0,0)
      .tickFormat("")
      .orient("bottom")
      .ticks(dataset[0].length);
       
      //添加横轴网格线
      var xInnerBar=svg.append("g")
      .attr("class","inner_line")
      .attr("transform", "translate(0," + (h - padding) + ")")
      .call(xInner);
       
      //定义纵轴网格线
      var yInner = d3.svg.axis()
      .scale(yScale)
      .tickSize(-(w-padding*2),0,0)
      .tickFormat("")
      .orient("left")
      .ticks(10);
       
      //添加纵轴网格线
      var yInnerBar=svg.append("g")
      .attr("class", "inner_line")
      .attr("transform", "translate("+padding+",0)")
      .call(yInner);
       
      //定义横轴
      var xAxis = d3.svg.axis()
      .scale(xScale)
      .orient("bottom")
      .ticks(dataset[0].length);
       
      //添加横坐标轴
      var xBar=svg.append("g")
      .attr("class","axis")
      .attr("transform", "translate(0," + (h - foot_height) + ")")
      .call(xAxis);
       
      //通过编号获取对应的横轴标签
      xBar.selectAll("text")
      .text(function(d){return xMarks[d];});
       
      //定义纵轴
      var yAxis = d3.svg.axis()
      .scale(yScale)
      .orient("left")
      .ticks(10);
       
      //添加纵轴
      var yBar=svg.append("g")
      .attr("class", "axis")
      .attr("transform", "translate("+padding+",0)")
      .call(yAxis);
       
      //添加图例
      var legend=svg.append("g");
       
      addLegend();
       
      //添加折线
      lines=[];
      for(i=0;i<currentLineNum;i++)
      {
      var newLine=new CrystalLineObject();
      newLine.init(i);
      lines.push(newLine);
      }
       
      //重新作图
      function drawChart()
      {
      var _duration=1000;
       
      getData();
       
      addLegend();
       
      //设置线条动画起始位置
      var lineObject=new CrystalLineObject();
       
      for(i=0;i<dataset.length;i++)
      {
      if(i<currentLineNum)
      {
      //对已有的线条做动画
      lineObject=lines[i];
      lineObject.movieBegin(i);
      }
      else
      {
      //如果现有线条不够,就加上一些
      var newLine=new CrystalLineObject();
      newLine.init(i);
      lines.push(newLine);
      }
      }
       
      //删除多余的线条,如果有的话
      if(dataset.length<currentLineNum)
      {
      for(i=dataset.length;i<currentLineNum;i++)
      {
      lineObject=lines[i];
      lineObject.remove();
      }
      lines.splice(dataset.length,currentLineNum-dataset.length);
      }
       
      maxdata=getMaxdata(dataset);
      newLength=dataset[0].length;
       
      //横轴数据动画
      xScale.domain([0,newLength-1]);
      xAxis.scale(xScale).ticks(newLength);
      xBar.transition().duration(_duration).call(xAxis);
      xBar.selectAll("text").text(function(d){return xMarks[d];});
      xInner.scale(xScale).ticks(newLength);
      xInnerBar.transition().duration(_duration).call(xInner);
       
      //纵轴数据动画
      yScale.domain([0,maxdata]);
      yBar.transition().duration(_duration).call(yAxis);
      yInnerBar.transition().duration(_duration).call(yInner);
       
      //开始线条动画
      for(i=0;i<lines.length;i++)
      {
      lineObject=lines[i];
      lineObject.reDraw(i,_duration);
      }
       
      currentLineNum=dataset.length;
      dataLength=newLength;
      }
       
      //定义折线类
      function CrystalLineObject()
      {
      this.group=null;
      this.path=null;
      this.oldData=[];
       
      this.init=function(id)
      {
      var arr=dataset[id];
      this.group=svg.append("g");
       
      var line = d3.svg.line()
      .x(function(d,i){return xScale(i);})
      .y(function(d){return yScale(d);});
       
      //添加折线
      this.path=this.group.append("path")
      .attr("d",line(arr))
      .style("fill","none")
      .style("stroke-width",1)
      .style("stroke",lineColor[id])
      .style("stroke-opacity",0.9);
       
      //添加系列的小圆点
      this.group.selectAll("circle")
      .data(arr)
      .enter()
      .append("circle")
      .attr("cx", function(d,i) {
      return xScale(i);
      })
      .attr("cy", function(d) {
      return yScale(d);
      })
      .attr("r",5)
      .attr("fill",lineColor[id]);
      this.oldData=arr;
      };
       
      //动画初始化方法
      this.movieBegin=function(id)
      {
      var arr=dataset[i];
      //补足/删除路径
      var olddata=this.oldData;
      var line= d3.svg.line()
      .x(function(d,i){if(i>=olddata.length) return w-padding; else return xScale(i);})
      .y(function(d,i){if(i>=olddata.length) return h-foot_height; else return yScale(olddata[i]);});
       
      //路径初始化
      this.path.attr("d",line(arr));
       
      //截断旧数据
      var tempData=olddata.slice(0,arr.length);
      var circle=this.group.selectAll("circle").data(tempData);
       
      //删除多余的圆点
      circle.exit().remove();
       
      //圆点初始化,添加圆点,多出来的到右侧底部
      this.group.selectAll("circle")
      .data(arr)
      .enter()
      .append("circle")
      .attr("cx", function(d,i){
      if(i>=olddata.length) return w-padding; else return xScale(i);
      })
      .attr("cy",function(d,i){
      if(i>=olddata.length) return h-foot_height; else return yScale(d);
      })
      .attr("r",5)
      .attr("fill",lineColor[id]);
       
      this.oldData=arr;
      };
       
      //重绘加动画效果
      this.reDraw=function(id,_duration)
      {
      var arr=dataset[i];
      var line = d3.svg.line()
      .x(function(d,i){return xScale(i);})
      .y(function(d){return yScale(d);});
       
      //路径动画
      this.path.transition().duration(_duration).attr("d",line(arr));
       
      //圆点动画
      this.group.selectAll("circle")
      .transition()
      .duration(_duration)
      .attr("cx", function(d,i) {
      return xScale(i);
      })
      .attr("cy", function(d) {
      return yScale(d);
      })
      };
       
      //从画布删除折线
      this.remove=function()
      {
      this.group.remove();
      };
      }
       
      //添加图例
      function addLegend()
      {
      var textGroup=legend.selectAll("text")
      .data(lineNames);
       
      textGroup.exit().remove();
       
      legend.selectAll("text")
      .data(lineNames)
      .enter()
      .append("text")
      .text(function(d){return d;})
      .attr("class","legend")
      .attr("x", function(d,i) {return i*100;})
      .attr("y",0)
      .attr("fill",function(d,i){ return lineColor[i];});
       
      var rectGroup=legend.selectAll("rect")
      .data(lineNames);
       
      rectGroup.exit().remove();
       
      legend.selectAll("rect")
      .data(lineNames)
      .enter()
      .append("rect")
      .attr("x", function(d,i) {return i*100-20;})
      .attr("y",-10)
      .attr("width",12)
      .attr("height",12)
      .attr("fill",function(d,i){ return lineColor[i];});
       
      legend.attr("transform","translate("+((w-lineNames.length*100)/2)+","+(h-10)+")");
      }
       
      //产生随机数据
      function getData()
      {
      var lineNum=Math.round(Math.random()*10)%3+1;
      var dataNum=Math.round(Math.round(Math.random()*10))+5;
      oldData=dataset;
      dataset=[];
      xMarks=[];
      lineNames=[];
       
      for(i=0;i<dataNum;i++)
      {
      xMarks.push("标签"+i);
      }
      for(i=0;i<lineNum;i++)
      {
      var tempArr=[];
      for(j=1;j<dataNum;j++)
      {
      tempArr.push(Math.round(Math.random()*h));
      }
      dataset.push(tempArr);
      lineNames.push("系列"+i);
      }
      }
       
      //取得多维数组最大值
      function getMaxdata(arr)
      {
      maxdata=0;
      for(i=0;i<arr.length;i++)
      {
      maxdata=d3.max([maxdata,d3.max(arr[i])]);
      }
      return maxdata;
      }
      </script>
      <p align="left">
      <button onClick="javascript:drawChart();">刷新数据</button>
      </p>
      </body>
      </html>

    ,打开后右键查看源码,点击【刷新数据】可以看到新的动画效果,加入了多系列支持和图例,看起来比较接近水晶易表的折线图了


    展开全文
  • 1、x轴和y轴设置: 水平方向柱状:x轴和y轴内容互换 xAxis:{ type:'category', 类目轴,即x方向按不同内容分类 data:xData 类目轴数据 }, yAxis:{ type:'value' type='value'不... name:'系列名称', ty
    柱状图:
    
    	1、x轴和y轴设置:
    		 水平方向柱状图:x轴和y轴内容互换
    		  xAxis:{
    	        type:'category',  类目轴,即x方向按不同内容分类
    	        data:xData, 	类目轴数据
    	        boundaryGap:false,  设置x第一个节点值,从y轴开始,默认有间距
    	        splitLine:{  	去掉坐标轴的水平虚线指示线
                	show:false
                },
    	        
    	      },
    	      yAxis:{
    	        type:'value'  	type='value'不需要设置data,会根据series中的数据显示
    	        scale:true,  	让y轴的值不从0开始
    	        splitNumber:5,  坐标轴分割的段数,只是预估值,会根据实际值的可读程度而改变
    	        minInterval:5,  坐标轴的最小刻度尺单位,会被splitNumber分割成的刻度而影响
    	        maxInterval:5   坐标轴的最大刻度尺单位,强制限定
    	      },
    
    	2、设置数据的显示方式和数据内容
    		series:[
    			{
    				name:'系列名称',
    				type:'bar', 数据显示方式,line为折线图
    				data:yData,  y轴数据和鼠标放上显示内容
    				markPoint:{  标记点,可以标记最大值和最小值以及任意点
    		          data:[
    		            {
    		              type:'max',
    		              name:'最大值',
    		            },{
    		              type:'min',
    		              name:'最小值'
    		            },
    		            {
    		              type:'average',
    		              name:'平均值'
    		            }
    		          ]
    		        },
    		        markLine:{ 标注线
    		          data:[
    		            {
    		              type:'average',
    		              name:'平均值'
    		            }
    		          ]
    		        },
    		        markArea:{ 标志指定区间阴影
    	             data: [
    	              [
    	                {
    	                  name:'区间1',
    	                  xAxis:'张三',
    	                },
    	                {
    	                  xAxis: '彭万里',
    	                }
    	              ],
    	              [
    	                {
    	                    name: '60分到80分',
    	                    yAxis: 60
    	                },
    	                {
    	                    yAxis: 80
    	                }
    	              ],
    	            ]
    	          },
    		        label:{ 数值标签
    		          show:true,  每个柱显示y轴对应值
    		          rotate:60,
    		          position:'inside'
    		        },
    		        barWidth:40,  图的宽度
    				
    			}
    		]
    	3、柱状图平移动画
    		(1)通过dataZoom设置startValue和endValue设置
    		(2)动态改变startValue和endValue的值,即可进行筛选平移
    		
     	4、进度条效果柱状
     		(1)根据方向设置两个x轴/y轴
     		(2)第二个x/y轴的数据是相同且的大于第一个x/y轴的数据
     		(3)设置第二个x/y轴对应的柱状样式,如边框和颜色为空
     			在series中通过xAxisIndex/yAxisIndex来指定控制对应的轴
    折线图:
    	基础配置和柱状图相同
    	series:[
    		{
    			type:'line',
    			smooth:true, 	设置平滑曲线
    			stack:'all',	堆叠图,stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免交叉重叠
    			lineStyle:{ 	线条样式
    	            color:'purple',
    	            type:'dashed'
    	        },
    	        areaStyle:{ 	绘制线条对应的到x轴的区域面积
    	           color:'orange'
    	        },
    		},
    		{
    			type:'line',
    			stack:'all',	stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免重叠
    		}
    	]
    

    效果图:
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    代码示例:
    柱状图:

    <template>
      <div id="app">
        
        <div class='map'>
    
        </div>
    
    
        <!-- <router-view/> -->
      </div>
    </template>
    
    <script>
    import echarts from 'echarts';
    
    export default {
      name: 'App',
      mounted:function(){
        var myMap=echarts.init(document.querySelector('.map'));
        var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
        var yData=[88,92,63,77,94,80,72,86];
    
        var option = {
          xAxis:{
            type:'category',//类目轴
            data:xData //类目轴数据
          },
          yAxis:{
            type:'value'  //type='value'不需要设置data,会根据series中的数据显示
          },
          // xAxis:{
          //    type:'value'  //type='value'不需要设置data,会根据series中的数据显示
          // },
          // yAxis:{
          //   type:'category',//类目轴
          //   data:xData //类目轴数据
          // },
          series:[ 
            {
              name:'成绩',
              type:'bar', //数据显示方式,bar柱状图
              data:yData,  //y轴数据和鼠标放上显示内容
              markPoint:{ //标记点,可以标记最大值和最小值以及任意点
                data:[
                  {
                    type:'max',
                    name:'最大值',
                  },{
                    type:'min',
                    name:'最小值'
                  },
                  {
                    type:'average',
                    name:'平均值'
                  }
                ]
              },
              markLine:{ //标注线
                data:[
                  {
                    type:'average',
                    name:'平均值'
                  }
                ]
              },
              label:{ //数值标签
                show:true,  //每个柱显示y轴对应值
                rotate:60,
                position:'inside'
              },
              barWidth:40,
    
            }
          ],
          tooltip:{
            trigger:'item'
          }
    
    
    
        };
    
        myMap.setOption(option);
    
      }
    }
    </script>
    
    <style>
    .map{
      height:500px;
      width:500px;
    }
    </style>
    
    

    柱状图平移动画实现:

    <template>
       <div class='s-c'>
         <div class='s-chart' ref='range'>
           
         </div>
       </div>
    </template>
    
    <script>
    
    
    export default {
      name:'trender',
      data(){
        return{
          myMap:null,
          data:[],
          startValue:0,
          endValue:9,
          timer:null
        }
      },
      mounted()
      {
          this._initChart();
          this._getData();
          window.onresize=this._resize;
          //第一次适配调用
          this._resize();
      },
      destroyed()
      {
          window.removeEventListener('resize',this._resize);
          clearInterval(this.timer);
      },
      methods:{
          _initChart()
          {
              this.myMap=this.$echarts.init(this.$refs.range,'chalk');
              const option={
                title: {
                    text: '▎ 地区销售排行',
                    left: 20,
                    top: 20
                },
                grid: {
                    top: '40%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    show: true
                },
    
                xAxis:{
                    type:'category'
                },
                yAxis:{
                    type:'value',
                    splitLine:{  
                        show:false
                    },
                },
                series:[
                    {
                        type:'bar',
                    }
                ]
              };
              this.myMap.setOption(option);
              this._listen();
          },
          async _getData()
          {
              let res = await this.$axios.get('/api/rank');
              this.data=res.data;
              this.data.sort((a,b)=>{
                  return b.value-a.value;
              })
              this._updateChart();
          },
          _updateChart()
          {
              const xData=this.data.map((item)=>{
                  return item.name;
              })
              const yData=this.data.map((item)=>{
                  return item.value;
              })
    
                const colorArr = [
                    ['#0BA82C', '#4FF778'],
                    ['#2E72BF', '#23E5E5'],
                    ['#5052EE', '#AB6EE5']
                ]
    
              const option={
                  xAxis:{
                      data:xData
                  },
                  dataZoom:[{
                      show:false,
                      startValue:this.startValue,
                      endValue:this.endValue
                  }],
                  series:[
                      {
                          data:yData,
                          itemStyle:{
                              color:e=>
                              {
                                let targetColorArr = null
                                if (e.value > 300) {
                                    targetColorArr = colorArr[0]
                                } else if (e.value > 200) {
                                    targetColorArr = colorArr[1]
                                } else {
                                    targetColorArr = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: targetColorArr[0]
                                },
                                {
                                    offset: 1,
                                    color: targetColorArr[1]
                                }
                                ])
    
                              }
                          }
                      }
                  ]
                  
              };
              this.myMap.setOption(option);
              this._panMove();
          },
          _resize()
          {
              const container = this.$refs.range.offsetWidth;
              const titleFontSize=container/100*3.6
              const option={
                  title:{
                      textStyle:{
                          fontSize:titleFontSize
                      }
                  },
                  series:[
                      {
                          barWidth:titleFontSize,
                          itemStyle:{
                              barBorderRadius:[titleFontSize/2,titleFontSize/2,0,0]
                          }
                      }
                  ]
              };
    
              this.myMap.setOption(option);
              this.myMap.resize();
          },
          //定时器平移柱
          _panMove()
          {
              if(this.timer)
              {
                  clearInterval(this.timer);
              }
              this.timer=setInterval(()=>{
                  this.startValue++;
                  this.endValue++;
    
                  if(this.endValue>this.data.length-1)
                  {
                      this.startValue=0;
                      this.endValue=9;
                  }
                  this._updateChart();
              },2000)
              
          },
          //监听移入移出
          _listen()
          {
              this.myMap.on('mouseover',()=>{
                  clearInterval(this.timer);
              })
              this.myMap.on('mouseout',()=>{
                  this._panMove();
              })
          }
      }
    
    }
    </script>
    
    <style lang='less' scoped>
    .s-c{
        width: 100%;
        height:100%;
        .s-chart{
          width: 100%;
          height:100%;
        }
    }
    </style>
    
    

    进度条效果柱状:

    <template>
       <div class="map" ref='bartech'>
         dd
       </div>
    </template>
    
    <script>
    
    
    export default {
      name:'bartech',
      data(){
        return{
          myMap:null
        }
      },
      mounted()
      {
          this._initMap();
          window.onresize=this._resize;
      },
      destroyed()
      {
          window.removeEventListener('resize',this._resize);
      },
      methods:{
          //0.25rem;
        _initMap()
        {
            this.myMap=this.$echarts.init(this.$refs.bartech);
            this._updataChart();   
            
        },
        _updataChart()
        {
            var data = [70, 34, 60, 78, 69];
            var titlename = ["HTML5", "CSS3", "javascript", "VUE", "NODE"];
            var valdata = [702, 350, 610, 793, 664];
            var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
    
            let option={
                title:{
                    text:'技能掌握',
                    textStyle:{
                        color:'white',
                        fontWeight: 400
                    },
                    left:'center'
                },
                grid: {
                    left: "0%",
                    top: "30px",
                    right: "0%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis:{
                    type:'value',
                    show:false,
                },
                yAxis:[{
                    type:'category',
                    inverse:true,
                    data:titlename,
                    splitLine:{
                        show:false
                    },
                    axisLabel: {
                      color: "#fff",
    
                      rich: {
                        lg: {
                          backgroundColor: "#339911",
                          color: "#fff",
                          borderRadius: 15,
                          // padding: 5,
                          align: "center",
                          width: 15,
                          height: 15
                        }
                      }
                    },
                    axisTick: {
                      show: false
                    },
                    axisLine: {
                      show: false
                    },
    
                },
                {
                  show: true,
                  inverse: true,
                  data: valdata,
                  axisLabel: {
                    textStyle: {
                      fontSize: 12,
                      color: "#fff"
                    }
                  }
                }
                ],
                series:[
                  {
                      type:'bar',
                      data:data,
                      barWidth: "35%",
                      itemStyle: {
                          barBorderRadius: 5
                      },
                      yAxisIndex:0,
                      barCategoryGap: 50,
                      label: {
                        show: true,
                        position: "inside",
                        formatter: "{c}%"
                      },
                      itemStyle:{
                        barBorderRadius: 20,
                        color:function(params)
                        {
                          var num=myColor.length;
                          return myColor[params.dataIndex%num]
                        }
                      }
                  },
                  {
                    type:'bar',
                    data:[100, 100, 100, 100, 100],
                    yAxisIndex: 1,
                    barWidth:'50%',
                    
                    itemStyle:{
                      color:'none',
                      borderColor:"#00c1de",
                      borderWidth: 3,
                      barBorderRadius: 15
                    }
                  }
                ]
            }
    
            this.myMap.setOption(option);
        },
        _resize()
        {
            this.myMap.resize();
        }
      }
    
    
    }
    </script>
    
    <style lang='less' scoped>
    .map{
        height: 100%;
        width:100%;
    
    }
    </style>
    
    

    折线图:

    <template>
      <div id="app">
        
        <div class='map'>
    
        </div>
    
    
        <!-- <router-view/> -->
      </div>
    </template>
    
    <script>
    import echarts from 'echarts';
    
    export default {
      name: 'App',
      mounted:function(){
        var myMap=echarts.init(document.querySelector('.map'));
        var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
        var yData1=[88,92,63,77,94,80,72,86];
        var yData2=[80,90,60,70,90,70,62,76];
    
        var option = {
          title:{
            text:'标题显示',
            textStyle:{
              color:'red'
            },
            subtext:'副文本',
            subtarget:'blank',
            sublink:'https://www.baidu.com',
            borderWidth:10,
            left:40
          },
          xAxis:{
            type:'category',//类目轴
            data:xData, //类目轴数据
            boundaryGap:false,  //设置x第一个节点值,从y轴开始,默认有间距
    
          },
          yAxis:{
            type:'value',  //type='value'不需要设置data,会根据series中的数据显示
            scale:true,  //让y轴的值不从0开始
            splitNumber:5,  //坐标轴分割的段数,只是预估值,会根据实际值的可读程度而改变
            minInterval:5,  //坐标轴的最小刻度尺单位,会被splitNumber分割成的刻度而影响
            maxInterval: 5  //坐标轴的最大刻度尺单位,强制限定
          },
          // xAxis:{
          //    type:'value'  //type='value'不需要设置data,会根据series中的数据显示
          // },
          // yAxis:{
          //   type:'category',//类目轴
          //   data:xData //类目轴数据
          // },
          series:[ 
            {
              name:'成绩',
              type:'line', //数据显示方式,bar柱状图
              data:yData1,  //y轴数据和鼠标放上显示内容
              stack:'all',  //stack可以是任意值,则第二个图就会在第一个图的每个数据*2的高度上进行绘制,避免重叠
              markPoint:{ //标记点,可以标记最大值和最小值以及任意点
                data:[
                  {
                    type:'max',
                    name:'最大值',
                  },{
                    type:'min',
                    name:'最小值'
                  },
                  {
                    type:'average',
                    name:'平均值'
                  }
                ]
              },
              markLine:{ //标注线
                data:[
                  {
                    type:'average',
                    name:'平均值'
                  }
                ]
              },
              markArea:{ //标志指定区间阴影
                  data: [
                  [
                    {
                      name:'区间1',
                      xAxis:'张三',
                    },
                    {
                      xAxis: '彭万里',
                    }
                  ],
                  [
                    {
                        name: '60分到80分',
                        yAxis: 60
                    },
                    {
                        yAxis: 80
                    }
                  ],
                ]
              },
              smooth:true,
              lineStyle:{ //线条样式
                color:'purple',
                type:'dashed'
              },
              areaStyle:{ //绘制线条对应的到x轴的区域面积
                color:'orange'
              },
              label:{ //数值标签
                show:true,  //每个柱显示y轴对应值
                rotate:60,
                position:'inside'
              },
              barWidth:12,
    
            },
            {
              name:'其他',
              data:yData2,
              type:'line',
              stack:'all', 
              label:{
                show:true
              }
            }
          ],
          tooltip:{
            show:true,
            trigger:'axios',
            showContent:true,
            formatter: '{a}: {b}({c})' //自定义提示框显示内容
          },
          toolbox:{ //使视图带有导出图片,数据视图,动态类型切换,数据区域缩放,重置
            show:true,
            showTitle:true,
            feature:{ //开启功能
              saveAsImage:{}, //可以导出下载
              dataView:{},   //切换成数据视图
              restore:{},  //重置
              dataZoom:{},  //区域缩放
              magicType:{ //动态类型切换
                type:['bar','line']
              }   
            }
          },
          legend:{
            data:['成绩','其他成绩'],
          }
    
    
    
        };
    
        myMap.setOption(option);
    
      }
    }
    </script>
    
    <style>
    .map{
      height:500px;
      width:500px;
    }
    </style>
    
    
    展开全文
  • # 系列名称,用于 tooltip 的显示,legend 的图例筛选。 series_name: str, # 系列数据 y_axis: types.Sequence[types.Union[opts.LineItem, dict]], # 是否选中图例 is_selected: bool = True, # 是否...

    优秀范例:https://blog.csdn.net/weixin_44146276/article/details/102705998

    关于折线的参数

    def add_yaxis(
        # 系列名称,用于 tooltip 的显示,legend 的图例筛选。
        series_name: str,
    
        # 系列数据
        y_axis: types.Sequence[types.Union[opts.LineItem, dict]],
    
        # 是否选中图例
        is_selected: bool = True,
    
        # 是否连接空数据,空数据使用 `None` 填充
        is_connect_nones: bool = False,
    
        # 使用的 x 轴的 index,在单个图表实例中存在多个 x 轴的时候有用。
        xaxis_index: Optional[Numeric] = None,
    
        # 使用的 y 轴的 index,在单个图表实例中存在多个 y 轴的时候有用。
        yaxis_index: Optional[Numeric] = None,
    
        # 系列 label 颜色
        color: Optional[str] = None,
    
        # 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
        is_symbol_show: bool = True,
    
        # 标记的图形。
        # ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 
        # 'diamond', 'pin', 'arrow', 'none'
        # 可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。
        symbol: Optional[str] = None,
    
        # 标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示宽和高,
        # 例如 [20, 10] 表示标记宽为 20,高为 10。
        symbol_size: Union[Numeric, Sequence] = 4,
    
        # 数据堆叠,同个类目轴上系列配置相同的 stack 值可以堆叠放置。
        stack: Optional[str] = None,
    
        # 是否平滑曲线
        is_smooth: bool = False,
    
        # 是否裁剪超出坐标系部分的图形。折线图:裁掉所有超出坐标系的折线部分,拐点图形的逻辑按照散点图处理
        is_clip: bool = True,
    
        # 是否显示成阶梯图
        is_step: bool = False,
    
        # 是否开启 hover 在拐点标志上的提示动画效果。
        is_hover_animation: bool = True,
    
        # 折线图所有图形的 zlevel 值。
        # zlevel用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。
        # zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
        z_level: types.Numeric = 0,
    
        # 折线图组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
        # z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。
        z: types.Numeric = 0,
    
        # 标记点配置项,参考 `series_options.MarkPointOpts`
        markpoint_opts: Union[opts.MarkPointOpts, dict, None] = None,
    
        # 标记线配置项,参考 `series_options.MarkLineOpts`
        markline_opts: Union[opts.MarkLineOpts, dict, None] = None,
    
        # 提示框组件配置项,参考 `series_options.TooltipOpts`
        tooltip_opts: Union[opts.TooltipOpts, dict, None] = None,
    
        # 标签配置项,参考 `series_options.LabelOpts`
        label_opts: Union[opts.LabelOpts, dict] = opts.LabelOpts(),
    
        # 线样式配置项,参考 `series_options.LineStyleOpts`
        linestyle_opts: Union[opts.LineStyleOpts, dict] = opts.LineStyleOpts(),
    
        # 填充区域配置项,参考 `series_options.AreaStyleOpts`
        areastyle_opts: Union[opts.AreaStyleOpts, dict] = opts.AreaStyleOpts(),
    
        # 图元样式配置项,参考 `series_options.ItemStyleOpts`
        itemstyle_opts: Union[opts.ItemStyleOpts, dict, None] = None,
    )
    

    LineItem:折线图数据项

    class LineItem(
        # 数据项名称。
        name: Union[str, Numeric] = None,
    
        # 数据项的值
        value: Union[str, Numeric] = None,
    
        # 单个数据标记的图形。
        symbol: Optional[str] = None,
    
        # 单个数据标记的大小
        symbol_size: Union[Sequence[Numeric], Numeric] = None,
    
        # 单个数据标记的旋转角度(而非弧度)。
        symbol_rotate: Optional[Numeric] = None,
    
        # 如果 symbol 是 path:// 的形式,是否在缩放时保持该图形的长宽比。
        symbol_keep_aspect: bool = False,
    
        # 单个数据标记相对于原本位置的偏移。
        symbol_offset: Optional[Sequence] = None,
    
        # 标签配置项,参考 `series_options.LabelOpts`
        label_opts: Union[LabelOpts, dict, None] = None,
    
        # 图元样式配置项,参考 `series_options.ItemStyleOpts`
        itemstyle_opts: Union[ItemStyleOpts, dict, None] = None,
    
        # 提示框组件配置项,参考 `series_options.TooltipOpts`
        tooltip_opts: Union[TooltipOpts, dict, None] = None,
    )
    

    官方文档:https://pyecharts.org/#/zh-cn/rectangular_charts?id=lineitem%ef%bc%9a%e6%8a%98%e7%ba%bf%e5%9b%be%e6%95%b0%e6%8d%ae%e9%a1%b9

    展开全文
  • 折线图的参数 lineThickness 折线的厚度 anchorRadius 折线节点半径,数字 anchorBgAlpha 折线节点透明度,[0-100] anchorBgColor 折线节点填充颜色,6位16进制颜色值 anchorBorderColor 折线节点边框颜色,6位16...
  • 2、每月用户增加量,时序折线图 最终页面呈现 数据展板,统一展示 具体操作步骤 设置一下页面语言,Superset做了部分汉化 配置数据源 数据源–》数据库–》添加,完善数据源信息 安装数据库依赖 ...

    需求说明

    • 数据主题:用户
    • 数据指标:
      • 1、各用户类型数量统计,饼图呈现
      • 2、每月用户增加量,时序折线图
    • 最终页面呈现
      • 数据展板,统一展示

    具体操作步骤

    设置一下页面语言,Superset做了部分汉化

    在这里插入图片描述
    在这里插入图片描述

    配置数据源

    • 数据源–》数据库–》添加,完善数据源信息
      在这里插入图片描述

    • 安装数据库依赖在这里插入图片描述

      • 数据库:数据库的显示名称
      • SQLAlchemy URI:配置链接uri,下面有个 SqlAlchemy docs ,详细介绍各种数据库的链接
        • mysql数据库:
          mysql://username:password@ip:3306/dbname?charset=utf8
        • msssql数据库:
          mssql+pymssql://username:password@ip:1433/dbname
      • 点击测试连接,出现下图,恭喜你配置数据源搞定
      • 在 SQL 工具箱中公开: 打钩
      • 其他项默认就行

      在这里插入图片描述

    编写数据指标(我这里以mssql为例)

    • SQL工具箱–》SQL编辑器
      在这里插入图片描述

    • 1、编写指标:各用户类型数量统计
      在这里插入图片描述

      • 点击保存查询:重命名为 各用户类型数量统计
    • 2、设置指标显示形式在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

    • 3、点击 左上角 ‘save’,保存
      在这里插入图片描述
      在这里插入图片描述

    • 4、同上方式步骤完成 每月用户增加量的 指标添加
      在这里插入图片描述

    创建数据展板

    • 看板–》添加,填写标题信息:人员
      在这里插入图片描述
    • 然后点击列表,进入看板编辑页面,开启愉快的陀锥之旅
      在这里插入图片描述
      在这里插入图片描述
      恭喜你,完成了Superset的第一个demo!!!
      不过,作为一名优秀的程序员,你会发现这个问题,这个看板跟我们最终交付的项目是两个独立的系统,那怎么整合到一起呢?
      别急,下一篇文章,咱们再见!一起聊聊,怎么整合Superset看板页面
    展开全文
  • Matplotlib学习教程(二)

    2021-01-03 18:41:41
    学习折线图的绘制和图形保存 给图形添加辅助功能(如:标注、x,y轴名称、标题等) 多次plot绘制图形 多个坐标系显示图形 知道折线图的应用场景 应用 天气的温度变化显示 1 折线图绘制与保存图片 为了...
  • 1、formatter里面的{a}{b}{c}{d}在什么时候使用?分别代表什么意思? 当需要重新排版鼠标...折线(区域)、柱状(条形): a(系列名称),b(类目值),c(数值), d(无) 散点(气泡) : a(系列名称...
  • one-country-page-源码

    2021-03-31 00:07:12
    折线图 系列过滤器:多选 显示的最大系列:〜3 网址设置: series_filter 数据 有3个数据集需要维护: country-lookup.csv (将iso代码转换为国家/地区名称) country-data.csv (这是驱动页面构建的主要驱动力...
  • 今天,我们续讲使用折线图,柱形图和散点图可视化资产回报。该图表看起来像我们想要的,但鼠标超过一点,并注意到一些次优的美学特征。首先,工具提示未显示与x-ais上显示的日期相同的日期。第二,它将完整的y轴值...
  • 用python实现PyEcharts中的折线图 笔记仅是个人的学习笔记总结,如有雷同请见谅 1. Pie class pyecharts.charts.Pie class Pie( # 初始化配置项,参考 `global_options.... # 系列名称,用于 tooltip 的显示,lege.
  • 技巧65 移动平均折线图 技巧66 为数据系列添加误差线 技巧67 美化误差线 技巧68 自定义误差量的妙用 技巧69 种误差量表示什么 技巧70 借助系列线观察差异 技巧71 用垂直线增强可读性 技巧72 用高低点连线强调数据...
  • 实例266 水平折线图 416 实例267 隐藏折线图 417 实例268 加粗折线 419 实例269 显示折线节点 420 实例270 生成节点图 421 实例271 设置虚线图 423 实例272 设置折线颜色 424 实例273 3D折线图 426 实例274 XY折线图...
  • 实例266 水平折线图 416 实例267 隐藏折线图 417 实例268 加粗折线 419 实例269 显示折线节点 420 实例270 生成节点图 421 实例271 设置虚线图 423 实例272 设置折线颜色 424 实例273 3D折线图 426 实例274 XY折线图...
  • 实例266 水平折线图 416 实例267 隐藏折线图 417 实例268 加粗折线 419 实例269 显示折线节点 420 实例270 生成节点图 421 实例271 设置虚线图 423 实例272 设置折线颜色 424 实例273 3D折线图 426 实例274 XY折线图...
  • 实例266 水平折线图 416 实例267 隐藏折线图 417 实例268 加粗折线 419 实例269 显示折线节点 420 实例270 生成节点图 421 实例271 设置虚线图 423 实例272 设置折线颜色 424 实例273 3D折线图 426 实例274 XY折线图...
  • 选中数据,点击右下角图标选择想要画的图的类型(这里选择折线图) 若行列相反,则选择"切换行/列" 此时,看到图例只是显示系列xx”。 点击【选择数据】——【编辑】——【190A】——【确定】,按此步骤...
  • excel——动态图表

    2020-07-06 14:41:17
    勾选显示的图表 在功能区显示开发工具:文件->选项->自定义功能区的右侧->...创建空白的折线图->右键选择数据->添加->系列值为:=excel表名!定义的名称 动态数据透视表 数据透视表建立好以后如果
  • 实例245 隐藏折线图中指定系列的折线 实例246 加粗折线 实例247 显示折线节点 实例248 生成节点图 实例249 绘制虚线折线图 实例250 设置折线颜色 实例251 3D折线图 实例252 XY折线图 实例253 排序折线图 9.3 时序图 ...
  • 实例245 隐藏折线图中指定系列的折线 实例246 加粗折线 实例247 显示折线节点 实例248 生成节点图 实例249 绘制虚线折线图 实例250 设置折线颜色 实例251 3D折线图 实例252 XY折线图 实例253 排序折线图 9.3 时序图 ...
  • 实例245 隐藏折线图中指定系列的折线 实例246 加粗折线 实例247 显示折线节点 实例248 生成节点图 实例249 绘制虚线折线图 实例250 设置折线颜色 实例251 3D折线图 实例252 XY折线图 实例253 排序折线图 9.3 时序图 ...
  • Java开发实战1200例.第2卷.part3

    热门讨论 2013-05-08 22:46:34
    实例245 隐藏折线图中指定系列的折线 392 实例246 加粗折线 393 实例247 显示折线节点 395 实例248 生成节点图 397 实例249 绘制虚线折线图 399 实例250 设置折线颜色 401 实例251 3D折线图 402 实例252 XY折线图 ...
  • Java开发实战1200例.第2卷.part2

    热门讨论 2013-05-08 22:45:35
    实例245 隐藏折线图中指定系列的折线 392 实例246 加粗折线 393 实例247 显示折线节点 395 实例248 生成节点图 397 实例249 绘制虚线折线图 399 实例250 设置折线颜色 401 实例251 3D折线图 402 实例252 XY折线图 ...
  • Java开发实战1200例.第2卷.part1

    热门讨论 2013-05-08 22:44:13
    实例245 隐藏折线图中指定系列的折线 392 实例246 加粗折线 393 实例247 显示折线节点 395 实例248 生成节点图 397 实例249 绘制虚线折线图 399 实例250 设置折线颜色 401 实例251 3D折线图 402 实例252 XY折线图 ...
  • FusionCharts-v3.1-crack

    2010-09-23 15:20:25
    折线图的参数 lineThickness折线的厚度 anchorRadius折线节点半径,数字 anchorBgAlpha折线节点透明度,[0-100] anchorBgColor折线节点填充颜色,6位16进制颜色值 anchorBorderColor折线节点边框颜色,6位16进制颜色...
  • 折线图的参数 lineThickness折线的厚度 anchorRadius折线节点半径,数字 anchorBgAlpha折线节点透明度,[0-100] anchorBgColor折线节点填充颜色,6位16进制颜色值 anchorBorderColor折线节点边框颜色,6位16进制颜色...
  • 折线图的参数 lineThickness折线的厚度 anchorRadius折线节点半径,数字 anchorBgAlpha折线节点透明度,[0-100] anchorBgColor折线节点填充颜色,6位16进制颜色值 anchorBorderColor折线节点边框颜色,6位16进制颜色...
  • 中文版Excel.2007图表宝典 1/2

    热门讨论 2012-04-06 18:49:24
    8.4.8 折线图中两个系列之间的阴影/237 8.5 创建时间线/238 8.6 通过堆积和重叠方法来创建“不可能的”图表/239 8.6.1 堆积图表/239 8.6.2 重叠图表/240 8.6.3 模拟一个“断裂的”值坐标轴/243 8.7 在图表表单中显示...
  • 中文版Excel.2007图表宝典 2/2

    热门讨论 2012-04-06 19:01:36
    8.4.8 折线图中两个系列之间的阴影/237 8.5 创建时间线/238 8.6 通过堆积和重叠方法来创建“不可能的”图表/239 8.6.1 堆积图表/239 8.6.2 重叠图表/240 8.6.3 模拟一个“断裂的”值坐标轴/243 8.7 在图表表单中显示...

空空如也

空空如也

1 2 3
收藏数 45
精华内容 18
关键字:

折线图系列名称显示