vue----使用echart基本使用（关于图标坐标轴文字过长，自定义样式等问题详细讲解）

最新推荐文章于 2024-05-28 11:11:34 发布

VIVI Xiao

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量1.9k

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/xyy1234567891/article/details/104819147

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在开发项目中，经常需要使用到图表，v-charts 的出现正是为了解决这个痛点。
基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。
v-charts官网：https://v-charts.js.org/#/

基本使用：
npm安装：

npm i v-charts echarts -S

完整引入
main.js

import Vue from 'vue'
import App from './App.vue'
import VCharts from 'v-charts'

Vue.use(VCharts)//引入图表插件

new Vue({
  el: '#app',
  render: h => h(App)
})

以下为详细讲述v-charts的配置项
//显示标题及位置：通过配置title属性

 title:{
            text:'近15天会议数量',
            subtext:'test', //可设置副标题
            x:'center',
            y:'top',
           textAlign:'center'
 }

在这里插入图片描述

//配置图例

 legend: {
        type: 'scroll',  //设置超出部分滚动
	    orient: 'vertical',  //设置竖向排列
	     show: true,          //是否显示，默认开启
		 right: 0,            //设置位置
		 top: 20,
		  bottom: 20,
		  textStyle: {          //文字样式
		      fontSize: 7
		    },
	      formatter: function (name) {      //超出部分隐藏显示
			  return (name.length > 12 ? (name.slice(0,12)+"...") : name ); 
          }
 }

在这里插入图片描述
//提示框组件,鼠标移动上去显示的提示内容

 //不需要考虑文字过长情况，
  tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
  },
 //若文字过长，可使用以下办法，可换行处理，最后超出部分使用省略号隐藏
  tooltip: {
    formatter:function(v){   //可通过打印v查看formatter提供的数据结构，从而自定义样式
      let text=v.name+' '+v.percent+'%';
      if(text.length <= 30)         
        {
         return text;
        }else if(text.length > 30 && text.length <= 60){
          return text = `${text.slice(0,30)}</br>${text.slice(3,60)}`
        }else if(text.length > 60 && text.length <= 90){
          return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}`
        }else if(text.length > 90 && text.length <= 120){
          return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}                                   </br>${text.slice(90,120)}`
       }else if(text.length > 120 && text.length <= 150){
          return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}`
       }else if(text.length > 150){
          return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}...</br>`
            }
         },
     }

在这里插入图片描述
//折线图或柱状图显示具体数值，及x坐标文字过长解决办法

  series: {
    label:{ 
        show: true, 
        position: "top" }//在每一列的最上方显示对应数值
     },
    xAxis: {
       axisLabel: {  
       interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
       rotate:-20,   //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
       formatter:function(value){//只显示8个字 其余省略号
          return value.length  >8?value.substring(0,8)+'...':value;
       }
   }
}

在这里插入图片描述
//饼状图显示对应比例及item在图表上

 series: {
    labelLine:{                  //图标连接数值的横线是否展示
        show : true
      }
   label: {
       normal: {
          show: true,
          position: 'outside',     //数值展示位置
          formatter:function(v){       //自定义展示内容
          let text=v.name;
          let percent = v.percent;
          return text.length>8?text.substr(0,8)+"... "+v.percent+'%':text+' '+v.percent+"%";  //如展示文字过长，则只取前，余下的隐藏
         }, 
         //formatter: '{b} {d}%',//如文字不会过多，可使用模板变量，模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
    textStyle : {              //设置文字样式
       align : 'center',
       baseline : 'middle',
       fontFamily : '微软雅黑',
       fontSize : 15,
    }
   },
 },    
}

在这里插入图片描述
以下是实现图表的一个基础案例。

 <ve-line :data="chartData" :extend="extend"></ve-line>
<script>
export default {
    data() {
        return {
        // 指定图表的配置项和数据
            extend: {
            legend: {
	            show: true,
		        right: 10,
		        top: 20,
		        bottom: 20,
            },
            title:{
                text:'近15天会议数量',
                //subtext:'test',  ---此处可设置副标题
                x:'center',
                y:'top',
                textAlign:'center'
            },
            series: {
                color:'#03A9F4',
                label: {
                    normal: {
                        show: true
                    }
                }
            }
            },
            chartData: {
              columns: ['日期', '会议数量'],
              rows: [{'日期':'02-26','会议数量':0},
                     {'日期':'02-27','会议数量':1},
                     {'日期':'02-28','会议数量':2},
                     {'日期':'02-29','会议数量':5}
              ]
            }
        };
    }

以下是图表实现的另一个案例
在这里插入图片描述

 <el-col :span=12>
    <ve-histogram :data="vote" :extend="extend"></ve-histogram>
 </el-col>
 <el-col :span=12>
     <ve-pie :data="vote" :extend="extend_pie"></ve-pie>
</el-col>
<script>
    export default {
        data: function(){
            this.extend = {  
                tooltip: {
                    formatter:function(v){
                        let text = v[0].name;
                        let num = v[0].seriesId;
                        if(text.length <= 30)
                        {
                            return `${text}</br><span class="tip_font"></span><span>${num}</span>`;
                        }else if(text.length > 30 && text.length <= 60){
                            return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br><span class="tip_font"></span><span>${num}</span>`
                        }else if(text.length > 60 && text.length <= 90){
                            return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br><span class="tip_font"></span><span>${num}</span>`
                        }else if(text.length > 90 && text.length <= 120){
                            return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br><span class="tip_font"></span><span>${num}</span>`
                        }else if(text.length > 120 && text.length <= 150){
                            return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}</br><span class="tip_font"></span><span>${num}</span>`
                        }else if(text.length > 150){
                            return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}...</br><span class="tip_font"></span><span>${num}</span>`
                        }
                    },
                },
     series: {
          label: { 
              show: true, 
              position: "top" }
         }, 
         xAxisType: 'value',
            xAxis: {
              axisLabel: {  
              interval:0,      //坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
              rotate:-20,   //标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
              formatter:function(value){//只显示五个字 其余省略号
                    return value.length  >8?value.substring(0,8)+'...':value;
              }
           }
         },
       },
      this.extend_pie = { 
          legend: {
	         show: true,
	         formatter: function (name) {
				return (name.length > 12 ? (name.slice(0,12)+"...") : name ); 
			 },
		   },
           tooltip: {
             formatter:function(v){
                let text=v.name+' '+v.percent+'%';
                  if(text.length <= 30)
                    {
                      return text;
                    }else if(text.length > 30 && text.length <= 60){
                       return text = `${text.slice(0,30)}</br>${text.slice(3,60)}`
                    }else if(text.length > 60 && text.length <= 90){
                       return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}`
                    }else if(text.length > 90 && text.length <= 120){
                       return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}`
                    }else if(text.length > 120 && text.length <= 150){
                       return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}`
                   }else if(text.length > 150){
                       return text = `${text.slice(0,30)}</br>${text.slice(30,60)}</br>${text.slice(60,90)}</br>${text.slice(90,120)}</br>${text.slice(120,150)}...</br>`
                  }
               },
             },
           series: {
              label: {
                normal: {
                  show: true,
                  position: 'outside',
                     formatter:function(v){
                       let text=v.name;
                       let percent = v.percent;
                       return text.length>8?text.substr(0,8)+"... "+v.percent+'%':text+' '+v.percent+"%";
                  }, 
                //formatter: '{b} {d}%',//模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。{d}数据会根据value值计算百分比
                textStyle : {                   
                   align : 'center',
                   baseline : 'middle',
                   fontFamily : '微软雅黑',
                   fontSize : 15,
                }
            },
          },    
      }
    }
     return {
                vote:[
                        {
                        columns: ['选项', '人数', ],
                        rows: [
                            // { '选项': '同意', '人数':15, },
                            // { '选项': '不同意', '人数':80,  },
                            // { '选项': '弃权', '人数': 5, },
                            …………
                        ]
                        }
                ]
            }
        },

VIVI Xiao

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue----使用echart基本使用（关于图标坐标轴文字过长，自定义样式等问题详细讲解）

在开发项目中，经常需要使用到表格，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。v-charts官网：https://v-charts.js.org/#/基本使用：npm安装：npm i v-charts echarts -S...
复制链接

扫一扫