echarts bar 控制大小_echarts基本配置参数
2024-06-01 13:14:50
网址：https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
五分钟上手 基本配置
1.矩形参数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1.引入资源 --><!-- <script src='js/echarts.min.js'></script> --><script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body><!-- 2.绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器 --><div id="main" style="width: 600px;height:400px;border:1px solid #999"></div><!-- 3.js绘制图表 --><script>//1.初始化 容器var myChart=echarts.init(document.getElementById('main'));//2.配置参数var option={//键值对={}title: {//标题组件，包含主标题和副标题show:true,//是否显示标题组件text: 'ECharts 入门学习',//主标题文本，支持使用 n 换行link:'https://www.baidu.com',//主标题文本超链接target:'blank',//指定窗口打开主标题超链接textStyle:{color:'red',//主标题文字的颜色fontStyle:'italic'},subtext:'直播学习',//副标题文本，支持使用 n 换行sublink:'',//副标题文本超链接subtextStyle:{color:'green',//字体颜色},padding:10,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。itemGap:10,//主副标题之间的间距// left:'right',//grid 组件离容器左侧的距离// top:20,//string number},tooltip: {//提示框组件 悬浮在主条上的文字提示trigger:'axis',//trigger 触发类型 axis坐标轴触发，主要在柱状图，折线图等//提示框浮层内容格式器，支持字符串模板和回调函数两种形式 {a}（系列名称），{b}（类目值），{c}（数值）formatter:'{a}-{b}-{c}'},legend: {//系列 展现了不同系列的标记(symbol)，颜色和名字// 设置文本为红色textStyle: {color: 'red'},selectedMode:false,//图例选择的模式，控制是否可以通过点击图例改变系列的显示状态// icon:'circle',//图例项的 icon// icon:'image://本地图片相对路径',icon:'image://https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582800159978&di=5f4072248d1103ccc38b0fe0bcfa4e34&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg',//'image://url' 设置为图片data:['销量']},xAxis: {//x轴 直角坐标系 grid 中的 x 轴axisLine:{//坐标轴轴线相关设置// show:false,//是否显示坐标轴轴线lineStyle:{//坐标轴线线的颜色color:'blue',//坐标轴线的颜色修改--文字也同步修改type:'dashed'}}, axisTick:{//坐标轴刻度相关设置// show:true,//是否显示坐标轴刻度alignWithLabel:true,//可以保证刻度线和标签对齐},axisLabel:{color:'green',//刻度标签文字的颜色},data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {//y轴 可以省略内容 数据series显示 axisLine:{//坐标轴轴线相关设置lineStyle:{//坐标轴线线的颜色color:'blue',}},axisLabel:{//坐标轴刻度标签的相关设置color:'green'},splitLine:{//坐标轴在 grid 区域中的分隔线。show:true,//是否显示分隔线。默认数值轴显示，类目轴不显示。lineStyle:{// color:'pink' //分隔线颜色，可以设置成单个颜色color:['#aaa','#ddd'],//隔线会按数组中颜色的顺序依次循环设置颜色}}},series: [{//系列列表。每个系列通过 type 决定自己的图表类型name: '销量',//系列名称，用于tooltip的显示，legend 的图例筛选type: 'bar',//柱状/条形图 label:{//图形上的文本标签，可用于说明图形的一些数据信息show:true,//是否显示标签 默认是不显示的 true会显示区域的值// position://label 位置// fontSize:16,//字体大小},itemStyle:{//图形样式// color:'yellowgreen',//柱条的颜色//线性渐变---xAxis 线的样式color: {type: 'linear',x: 0,//左y: 0,//上x2: 0,//右y2: 1,//下colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false},borderColor:'#000',//描边barBorderRadius :20,//圆角},emphasis:{//高亮的图形样式和标签样式label:{show:false,// fontSize:20},itemStyle:{color:'pink'}},barWidth:40,//柱条的宽度，不设时自适应。data: [5, 20, 66, 10, 10, 20]}]}//3.使用刚指定的配置项和数据显示图表myChart.setOption(option);//setOption({ ---- })</script>
</body>
</html>2.平滑曲线
代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src='js/echarts.min.js'></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;background: #0F2B5E;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {show:false,text: 'ECharts 入门示例'},tooltip: {trigger:'axis'},legend: {textStyle:{color:'#fff'},data:['销量']},xAxis: {axisLine:{lineStyle :{//坐标轴线线的颜色color:'#04B0B8'}},axisTick:{alignWithLabel:true,},boundaryGap:false,//坐标轴两边留白策略data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {axisLine:{lineStyle :{//坐标轴线线的颜色color:'#04B0B8'}},splitLine:{lineStyle:{color:'#0A4C7C'}}},series: [{name: '销量',type: 'line',//折线图lineStyle:{//线条样式color:"#04B0B8",},itemStyle:{opacity:0,borderWidth:0,//无描边},areaStyle:{//区域填充样式color:{type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#04B0B8' // 0% 处的颜色}, {offset: 1, color: '#333' // 100% 处的颜色}],global: false // 缺省为 false}},smooth:true,//是否平滑曲线显示data: [5, 20, 36, 46, 40, 36]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>echarts bar 控制大小_echarts基本配置参数相关推荐
- echarts散点图中大小_ECharts如何实现散点图
在 ECharts 系列中通过使用 series[i]-scatter 来实现散点(气泡)图.直角坐标系上的散点图可以用来展现数据的 x,y 之间的关系,如果数据项有多个维度,其它维度的值可以通过不同 ...
- Echarts(自己整理的一些散点图、饼图、条形图、散点图的基本配置参数)
1.引人echarts.js <script src="echarts.min.js"></script> 2. 为 ECharts 准备一个具备大小(宽高 ...
- 25 PP配置-生产车间控制-工序-定义生产计划参数文件
业务背景:定义生产计划参数文件 事务码:OPKP SPRO路径:SPRO->生产->商店底价控制->主数据->定义生产计划参数文件 第1步,SPRO进入 第2步,通过" ...
- Configuring the Salt Minion - Salt Minion配置参数的完全说明
Configuring the Salt Minion - Salt Minion配置 Salt系统非常简单且易于配置. Salt系统的两个组件各自具有相应的配置文件. salt-master通过ma ...
- ActiveMQ5.14.5配置参数详解
Activemq-.xml 1.加载properties配置参数.下面加载是访问broker的身份信息,即用户名和密码 <bean class="org.springframework ...
- BoneCP学习笔记——配置参数
一.BoneCP配置文件格式(bonecp-config.xml): <?xml version="1.0" encoding="UTF-8"?> ...
- Hadoop Yarn配置参数整理（非常全面）
RM与NM相关参数 ResourceManager 参数名称 作用 默认值 yarn.resourcemanager.address ResourceManager 对客户端暴露的地址.客户端通过该地 ...
- Hadoop-2.8.0集群搭建、hadoop源码编译和安装、host配置、ssh免密登录、hadoop配置文件中的参数配置参数总结、hadoop集群测试,安装过程中的常见错误
25. 集群搭建 25.1 HADOOP集群搭建 25.1.1集群简介 HADOOP集群具体来说包含两个集群:HDFS集群和YARN集群,两者逻辑上分离,但物理上常在一起 HDFS集群: 负责海量数据 ...
- kafka配置_Kafka生产环境的几个重要配置参数
Kafka在弹性.容错性以及高吞吐量方面有着很大的优势.想要达到生产环境最优,发挥这些特性,需要我们进行一系列的配置.Kafka提供了非常多的配置属性,对于初学者而言,很容易陷入困惑.其实,多数的配置 ...
最新文章
- python 检验数据正态分布程度_python 实现检验33品种数据是否是正态分布
- 中国国家气象局天气预报信息接口
- Cookie对象的应用
- Leet Code OJ 231. Power of Two [Difficulty: Easy]
- SqlServer自定义排序
- 电脑软件：巧用微软小工具解决日常问题！
- GWT和HTML5 Canvas演示
- 第二十期:核心交换机的链路聚合、冗余、堆叠、热备份
- 用history api偷换浏览器历史记录
- 简述一下索引的匹配原则_Mysql联合索引最左匹配原则
- 职场精英修炼必学工具：75页自我管理的29个工具，系统方法论
- 前端见微知著AngularJS备忘篇：温故而知新，可以为师矣
- 关于HTTP协议的学习
- java类变量 访问_在Java类中对变量或方法的访问有哪些访问控制的关键字?他们各有什么作用,举例说明。...
- 上海少儿社保参保问题
- CSS：N种使用CSS 绘制三角形的方法
- postman使用自定义函数
- 贷款的五种方法，解决您的购房资金问题
- KISSsoft 2022 SP3
- 你也可以成为VTuber