跳至主要內容

element-plus 手把手带你用vue建后台 系列三（数据可视化篇）

青柠2022年7月21日element-plus大约 6 分钟约 1777 字

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台 系列一（项目介绍篇)

手把手带你用 vue 建后台 系列二（权限路由篇)

手把手带你用 vue 建后台 系列四（实战篇)

手把手带你用 vue 建后台 系列五（打包发布篇)

前言

目前市面上的后台管理系统，首页大多选择使用数据可视化展示数据，这样的数据清晰可见，比较直观，目前有很多数据可视化的平台，诸如 highchart,antV，但是本人认为现在生态最好的是 apache 在维护的 echarts，目前已经更新到 v5，本项目使用 echarts 开发数据可视化，具体配置可查阅官网，这里讲解一些最常用的属性

初始化 echarts

首先是安装 echarts

npm install echarts --save
  • 使用方法一，基于准备好的 dom，初始化实例
<!-- -->
<template>
  <div>
    <div id="main" style="width: 35%; height: 300px;"></div>
  </div>
</template>
<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted } from 'vue';
onMounted(()=>{
    init()
  })
const init = ()=>{
  let mychart = echarts.init(document.getElementById('main') as HTMLElement)
  var option = {
    title: {
    text: '产品销量排行'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
  {
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
    }
  ]
};
// 给予数据源
mychart.setOption(option)
}
</script>
<style lang='scss' scoped>
</style>
  • 使用方法二 通过 ref 虚拟化 dom
<!-- -->
<template>
  <div>
     <div style="margin: 15px 25px;">Echart5可视化</div>
     <div ref="main" style="width: 33%; height: 300px"></div>
  </div>
</template>
<script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
const main = ref()
onMounted(
  () => {
    init()
  }
)
function init() {
// 使用ref创建虚拟DOM引用，使用时用main.value
var myChart = echarts.init(main.value);
// 指定图表的配置项和数据
var option = {
  title: {
    text: '产品销量排行'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
  {
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
</script>
<style lang='scss' scoped>
</style>

总结：使用echarts步骤

引入：注意这里使用 import * as echarts from 'echarts'

  • 先准备一个DOM元素，定义好高度和宽度
  • 使用echarts.init()方法，初始化一个ECharts的实例,这里也可以使用ref虚拟dom
  • 使用setOption设置配置项

Echars5的title属性

首先看属性

title: {
  // 标题
  show: true, //是否显示
  text: "4545",
  link:'http://www.baidu.com', 
  target:'self', //'self' 当前窗口打开 'blank' 新窗口打开
  x:'center',
  textStyle: {
    color: "#fff", // 主标题文字的颜色。
    fontStyle: "normal", // 主标题文字字体的风格。 'normal' 'italic' 'oblique'
    fontWeight: "normal", // 主标题文字字体的粗细。 'normal' 'bold' 'bolder' 'lighter' 500|600
    fontFamily: "sans-serif", // 主标题文字的字体系列。
    fontSize: 18, // 字体大小
  },
  subtext: "bb", // 副标题文本
  subtextStyle:{
  }
}

legend属性

egend是图表的图例

以下是单独配置的方法

legend:{
  show:true,
  icon:'circle',
  top:'10%',
  itemWidth:10,
  textStyle:{
    color:'red',
    fontSize:20,
    backgroundColor:'yellow'
  }
},

legend配置多name样式,

data能控制显示的系列名,比show:true控制更加精确

legend: {
  data: [{
      name: '南山',
      // 强制设置图形为圆。
      icon: 'circle',
      // 设置文本为红色
      textStyle: {
        color: 'red'
      }
    }, {
    name: '福田',
    // 强制设置图形为圆。
    icon: 'circle',
    // 设置文本为红色
    textStyle: {
      color: 'blue'
      }
    },
  ]
},

tooltip属性

tooltip是什么?

是我们提示框组件,鼠标滑过,或者点击显示的信息

trigger 触发方式

item axis

triggerOn 触发时机

'mousemove|click' 分别代表移动到触发 和点击触发

formatter 格式化

  • 折线（区域）图、柱状（条形）图、K线图 : {a} （系列名称）， {b} （类目值）， {c} （数值）,{d} （无）
  • 散点图（气泡）图 : {a} （系列名称）， {b} （数据名称）， {c} （数值数组）, {d} （无）
  • 地图 : {a} （系列名称）， {b} （区域名称）， {c} （合并数值）, {d} （无）
  • 饼图、仪表盘、漏斗图: {a} （系列名称）， {b} （数据项名称）， {c} （数值）, {d} （百分比）
tooltip: {
  trigger:'axis',
  triggerOn:'click',
  formatter:'{a}{b}{c}'
},

formatter的格式化从 {a}{b}{c}的顺序往下,无需去记

主要是formatter的格式化回调函数格式:

tooltip: {
trigger:'axis',
  triggerOn:'click',
  formatter:(params:Array<any>)=>{
    console.log(params)
  }
},

回调格式,是表单数据,这样的目标是为了能更加自由的定制回调显示

图片
图片

toolbox属性

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

toolbox: {
  feature: {
    saveAsImage: {},
    dataView:{},
    restore:{},
    dataZoom:{},
    magicType:{
      type:['bar','line']
    }
  }
}

水平柱状图

柱状图的配置主要series中进行配置

1.水平柱状图 柱状图的配置很简单,有水平的垂直的,控制垂直还是水平,在于对xaxis和yaxis的配置.默认data给到哪,哪行就是属性轴,默认的type:'category'就是配置在哪行,另一行就是type:'value'

xAxis: {
  data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},

2.聚合柱状图 经常用到聚合柱状图，以更直观地比较各维度信息,不同维度数据配置在series中,一个对象就为一个维度数据

{
name: '销量1',
type: 'bar',
stack:'111',
label:{
  show:true,
  position:'top'
},
itemStyle:{
  color:'red'
},
data: [5, 20, 36, 10, 10, 20]
},
{
name: '销量2',
type: 'bar',
stack:'112',
data: [5, 20, 36, 10, 10, 20]
}

3.堆叠柱状图 一般对比各个维度数据,可以考虑堆叠,这样更加清晰，在series中配置stack的值,如果值相同则柱状可以堆叠在一起

stack:'销量'

4.柱状图样式 自定义颜色

itemStyle

color为颜色配置

折线图

普通折线图,在系列中设置

type:'line'

既可以从柱状图改为折线图 直线变曲线

smooth :true //平滑过渡 ,将直线变成曲线

内容填充

areaStyle:{}

标记 分别使用markPoint和markLine可以标记，折线图的最大值和最小值,还有平均线

markPoint:{
  data:[
    {type:'max',name:'最大值'},
    {type:'min',name:'最小值'}
  ]
  },
  markLine:{
    data:[
      {type:'average',name:'平均值'}
    ]
},

如果要达到折线的堆叠效果也是一样,stack设置的值一样即可,然后,我们在选择折线图的时候可以给予选择高亮

emphasis:{
  focus:'series'
}

饼图

type:'pie',则可以设置charts图表为简单饼图，如果需要效果特色更好看点,可以选择，环形饼图和玫瑰饼图

环形

radius:['40%','70%'] //第一个参数内半径,第二个参数外半径

也可以通过label配置饼图的标签

label:{
  show:true,
  position:'' //这里和折线图不同,这里配置参数是outside和inside center 代表 外 里 中心
}

玫瑰pie

roseType:'area'

如果饼图想单独给属性设置color,相对麻烦,之前的折线和柱状都是在series中有多个不同对象可以在对象中配置itemStyle,而pie图是数组组成,需要配置的话要在data映射的数组中配置itemStyle

懂生活，懂编程
Copyright © 2025 青柠