echarts 柱状图(带柱平移动画、进度条效果柱状)、折线图(曲线图)

我不是女神ヾ 2021-07-24 11:27 3884阅读 0赞

柱状图:
    
    	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的高度上进行绘制,避免重叠
    		}
    	]

效果图:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]

代码示例:  
柱状图:

柱状图平移动画实现:

<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>
    
    
        
      </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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201015144014569.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/4f285d0690c345a4886312ffa1f52b33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201022163329732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210724/e0f552f9f8a447b98ea2074163f19396.png