Echarts图例组件的属性与源代码
图例（legend）组件是ECharts中较为常用的组件，它用于以不同的颜色区别系列标记的名字，表述了数据与图形的关联。用户在操作时，可以通过单击图例控制哪些数据系列显示或不显示。
在ECharts 3.x/ECharts 4.x中，单个ECharts实例可以存在多个图例组件，方便多个图例的布局。当图例数量过多时，可以使用滚动翻页。
在ECharts中，图例组件的属性如表所示
图例组件属性示意图如图所示。
利用某一年的蒸发量、降水量、最低气温和最高气温数据绘制折柱混搭图，并为图表配置图例组件。
当图例数量过多或图例长度过长时，可以使用垂直滚动图例或水平滚动图例，参见属性legend.type。此时，设置type属性的值为“scroll”，表示图例只显示在一行，多余的部分会自动呈现为滚动效果，如图所示。
由图可知，右上方的 滑动 图标即图例的滚动图标，可以将图例呈现为滚动效果。
图例的源代码如下;
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
color: ["red", 'green', 'blue', 'grey'], //使用自己预定义的颜色
legend: {
orient: 'horizontal', //'vertical'
x: 'right', //'center'|'left'|{number},
y: 'top', //'center'|'bottom'|{number}
backgroundColor: '#eee',
borderColor: 'rgba(178,34,34,0.8)',
borderWidth: 4,
padding: 10,
itemGap: 20, textStyle: { color: 'red' },
},
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: [ //配置y轴坐标系
{ //设置第1条y轴
type: 'value',
axisLabel: { formatter: '{value} ml' }
},
{ //设置第2条y轴
type: 'value',
axisLabel: { formatter: '{value} °C' },
splitLine: { show: false }
}
],
series: [ //配置数据系列
{ //设置数据系列1
name: '某一年的蒸发量', type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6]
},
{ //设置数据系列2
name: '某一年的降水量', smooth: true,
type: 'line', yAxisIndex: 1, data: [11, 11, 15, 13, 12, 13, 10]
},
{ //设置数据系列3
name: '某一年的最高气温', type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6]
},
{ //设置数据系列4
name: '某一年的最低气温', smooth: true,
type: 'line', yAxisIndex: 1, data: [-2, 1, 2, 5, 3, 2, 0]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
总结
到此这篇关于Echarts图例组件属性与源代码的文章就介绍到这了,更多相关Echarts图例组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
echarts设置图例颜色和地图底色的方法实例
前言 本来想写echarts初始化函数的,但最近因为要写一个地图与柱状图的混合方式,也就是每个省的地图上要有柱状图显示.于是仔细使用了一下地图. 1.地图的一些基本属性就不介绍了,还是那些style 2.地图数据的获取以及Series的加载和其他没有什么大的差异.地图数据都在map.js中,都可以自己看,也可以自己根据格式获取响应的数据. 这里主要想处理的是图例颜色与地图底图颜色怎么设置的问题. 1.图例的颜色代码 refresh: function (newOption) { if (newO
-
基于Python pyecharts实现多种图例代码解析
词云图 from pyecharts.charts import WordCloud def word1(): words= [ ("Sam S Club", 10000), ("Macys", 6181), ("Amy Schumer", 4386), ("Jurassic World", 4055), ("Charter Communications", 2467), ("Chick Fil
-
在echarts中图例legend和坐标系grid实现左右布局实例
1.效果图 2.实现方法 将图例legend纵向排列(orient: 'vertical'),宽度给150(width: 150),坐标系grid左侧距离200(left: 200),中间有50的边距 3.代码展示 grid: { left: 200 }, legend: { x: 'left', data: ['送风温度', '混风温度', '冷冻水送水温度', '冷冻水回水温度', '热水送水温度', '热水回水温度', '送风温度设定点', '风机速度','风机速度反馈','风阀开度'],
-
pyecharts调整图例与各板块的位置间距实例
引入Grid grid=Grid() # 可以分别调整上下左右的位置,可以是百分比,也可以是具体像素,如pos_top="50px" grid.add(c,grid_opts=opts.GridOpts(pos_top="50%",pos_bottom="50%",pos_left="50%",pos_right="50%")) 调整前的默认距离 代码如下 from example.commons impo
-
Echarts图例组件的属性与源代码
图例(legend)组件是ECharts中较为常用的组件,它用于以不同的颜色区别系列标记的名字,表述了数据与图形的关联.用户在操作时,可以通过单击图例控制哪些数据系列显示或不显示. 在ECharts 3.x/ECharts 4.x中,单个ECharts实例可以存在多个图例组件,方便多个图例的布局.当图例数量过多时,可以使用滚动翻页. 在ECharts中,图例组件的属性如表所示 图例组件属性示意图如图所示. 利用某一年的蒸发量.降水量.最低气温和最高气温数据绘制折柱混搭图,并为图表配置图例组件.
-
vue组件watch属性实例讲解
本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>wacth属性</title> <script src="js/vue.js"></script> </head> <body> <div i
-
分享bootstrap学习笔记心得(组件及其属性)
Bootstrap是一种web框架,是基于HTML,CSS和JS的一种目前较为流行的前端框架. Bootstrap包含有丰富的组件,根据提供的组件,开发者可以更加快速.便捷地搭建自己心仪的网站.通常包括有以下常用组件:下拉菜单.按钮组.按钮下拉菜单.导航.导航条.分页.排版.缩略图.警告对话框.进度条.媒体对象等.此外,bootstrap还包含有众多jQuery插件:莫泰局昂.标签页.滚动条.弹出框等. 有关bootstrap的下载和文档可到bootstrap中文网:www.bootcss.co
-
微信小程序Echarts图表组件使用方法详解
1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&
-
关于vue组件事件属性穿透详解
组件事件属性穿透 属性 $attrs包含从父组件传过来的属性,但不包含子组件中prop中的属性以及class和style,所以对于那些html元素原生属性,可以不用再子组件中声明,直接从父组件中传进来就好 // 子组件 <template> <div> <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/> &l
-
Ant-design-vue Table组件customRow属性的使用说明
官网示例 使用方式 // 表格中加入customRow属性并绑定一个custom方法 <a-table rowKey="stockOrderCode" :columns="columns" :dataSource="dataSource" :pagination="pagination" :customRow="customRow" > </a-table> // methods中定
-
Vue使用echarts可视化组件的方法
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts,安装echarts组件(脚手架的地址就是你vue项目的地址) (E:\demo\vuepro)这是我的项目地址,vuepro为项目名 2.按需导入,以加快打开速度 //引入echarts组件 import echarts from "echarts" // 引入基本模板 let echa
-
vue 注释template中组件的属性说明
目录 注释template中组件属性 实例中的template讲解 调试图片 原理说明图片 终极结论 注释template中组件属性 想注释一个组件的属性,一直报错 [vue/no-parsing-error] Parsing error: unexpected-character-in-attribute-name 因为项目中引入了eslint-plugin-vue,对template有默认检测,因此就直接修改.eslintrc.js文件 "unexpected-character-in-at
-
vant中field组件label属性两端对齐问题及解决
目录 field组件label属性两端对齐问题 先看看原来的四种效果 label左对齐 看看官方文档 另一种解决思路 vant输入框label两端对齐 field组件label属性两端对齐问题 最近在开发一个移动端的Web应用,使用vant构建移动端的页面,在构建表单时,使用Field组件作为信息输入和展示,但是但是由于对于label属性只提供了left.center.right的对齐方式,个人觉得不是很美观,希望能够显示两端对齐的效果. 先看看原来的四种效果 label左对齐 label居中对
-
Vue3中使用setup通过ref获取子组件的属性
目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template> <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'