脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue ECharts配置

Vue ECharts图表通用配置详解

 更新时间：2022年12月15日 11:48:50   作者：爱学习de测试小白  
这篇文章主要介绍了Vue ECharts图表通用配置，Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用

前言

本篇来学习下ECharts图表中的通用配置

标题

title：标题

title: {
          text: "分数", // 标题文字
           textStyle: {
               color: 'red' // 文字颜色
           },
           borderWidth: 2, // 标题边框宽度
           borderColor: 'blue', // 标题边框颜色
           borderRadius: 5, // 标题边框圆角
           left: 50, // 标题的位置
           top: 10 // 标题的位置
        }

效果

提示框

tooltip：提示框

触发类型: trigger：可选值有item\axis

触发时机: triggerOn：可选值有 mouseOver\click

格式化显示: formatter

字符串模板

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: '{b}:{c}'
 	}
}

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可 > 以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, > {d}在不同图表类型下代表数据含义为：

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

回调函数

var option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'click',
    formatter: function (arg) {
      return arg.name + ':' + arg.data
  		 }
	 }
}

效果

工具按钮

toolbox：工具按钮

toolbox: {
	      feature: {
	             saveAsImage: {}, // 将图表保存为图片
	             dataView: {}, // 是否显示出原始数据
	             restore: {}, // 还原图表
	             dataZoom: {}, // 数据缩放
	             magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
	                 type: ['bar', 'line']
	             }
	         }
	     }

效果

图例

legend：图例，用于筛选类别,需要和 series 配合使用

  • legend 中的 data 是一个数组
  • legend 中的 data 的值需要和 series 数组中某组数据的 name 值一致
 legend: {
            data: ['分数', '年龄'] // series中name值保持一致
        }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts-柱状图</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>
<body>
<!-- 准备一个呈现图表的盒子 -->
<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 准备数据 将type的值设置为bar
    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var ageDataArr = [20, 21, 19, 20, 18]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        title: {
            text: "分数", // 标题文字
            textStyle: {
                color: 'red' // 文字颜色
            },
            borderWidth: 2, // 标题边框宽度
            borderColor: 'blue', // 标题边框颜色
            borderRadius: 5, // 标题边框圆角
            left: 50, // 标题的位置
            top: 10 // 标题的位置
        },
        tooltip: {
            trigger: 'item',  // axis
            triggerOn: 'click',  // mouseOver 鼠标移动都上面触发
            // formatter: '{b}的{a}是{c}'
            formatter: function (arg) {
                console.log(arg)
                return arg.name + '分数:' + arg.data
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}, // 将图表保存为图片
                dataView: {}, // 是否显示出原始数据
                restore: {}, // 还原图表
                dataZoom: {}, // 数据缩放
                magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持
                    type: ['bar', 'line']
                }
            }
        },
        legend: {
            data: ['分数', '年龄'] // series中name值保持一致
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr,
                markPoint: {   // 标记最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱状图显示数值
                    rotate: 30, // 值旋转角度
                },
                barWidth: '30%' // 柱的宽度
            },
            {
                name: '年龄',
                type: 'line',
                data: ageDataArr
            }
        ]
    }
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>
</html>

到此这篇关于Vue ECharts图表通用配置介绍的文章就介绍到这了,更多相关Vue ECharts配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue动画事件详解及过渡动画实例

    Vue动画事件详解及过渡动画实例

    通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。Vue.js 会在适当的时机为你触发 CSS 过渡或动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作
    2019-02-02
  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    Vue的移动端多图上传插件vue-easy-uploader的示例代码

    这篇文章主要介绍了Vue的移动端多图上传插件vue-easy-uploader的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue使用js-audio-recorder实现录制,播放与下载音频功能

    Vue使用js-audio-recorder实现录制,播放与下载音频功能

    这篇文章主要为大家详细介绍了Vue如何使用js-audio-recorder实现录制,播放与下载音频功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下
    2023-12-12
  • Vue3 中的插件和配置推荐大全

    Vue3 中的插件和配置推荐大全

    这篇文章主要介绍了Vue3 中的插件和配置推荐大全，本文通过图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • vue 计算属性和侦听器的使用小结

    vue 计算属性和侦听器的使用小结

    这篇文章主要介绍了vue 计算属性和侦听器的使用小结，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • Vue实现购物车场景下的应用

    Vue实现购物车场景下的应用

    这篇文章主要为大家详细介绍了Vue实现购物车场景下的应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue项目实现对某个区域绘制水印

    vue项目实现对某个区域绘制水印

    这篇文章主要为大家详细介绍了vue项目实现对某个区域绘制水印，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于electron+vue3+ts搭建桌面端应用并且可以热更新

    基于electron+vue3+ts搭建桌面端应用并且可以热更新

    这篇文章主要为大家详细介绍了如何基于electron+vue3+ts搭建桌面端应用并且可以热更新,文中的示例代码讲解详细,感兴趣的小伙伴可以参考下
    2023-10-10
  • Vue2组件tree实现无限级树形菜单

    Vue2组件tree实现无限级树形菜单

    这篇文章主要为大家详细介绍了Vue2组件tree实现无限级树形菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue路由跳转后刷新指定页面的方法

    vue路由跳转后刷新指定页面的方法

    这篇文章主要介绍了vue路由跳转后刷新指定页面的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12

最新评论