008_直接的样式设置

最新推荐文章于 2023-11-28 15:40:03 发布
最新推荐文章于 2023-11-28 15:40:03 发布
阅读量1.3k 收藏
点赞数
分类专栏： Apache ECharts 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/123519522
版权

1. 直接的样式设置是比较常用设置方式。纵观ECharts的option中, 很多地方可以设置itemStyle、lineStyle、areaStyle、label等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

2. 一般来说, ECharts的各个系列和组件, 都遵从这些命名习惯, 虽然不同图表和组件中, itemStyle、label等可能出现在不同的地方。

3. 图形样式series-type.itemStyle

3.1. series-type.itemStyle.color = 'auto'图形的颜色, 默认从全局调色盘option.color获取颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。

3.2. series-type.itemStyle.borderColor = '#000'图形的描边颜色。Color类型。

3.3. series-type.itemStyle.borderWidth图形的描边宽度, 默认不描边。number类型。

3.4. series-type.itemStyle.borderType = 'solid'图形的描边类型, 默认为实线, 支持'dashed'和'dotted'。string类型。

3.5. series-type.itemStyle.borderRadius图形的圆角半径, 单位px, 支持传入数组分别指定4个圆角半径。number和Array类型。如:

borderRadius: 5, // 统一设置四个角的圆角大小
borderRadius: [5, 5, 0, 0] // (顺时针左上, 右上, 右下, 左下)

3.6. series-type.itemStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。

3.7. series-type.itemStyle.shadowColor阴影颜色。支持的格式同color。Color类型。

3.8. series-type.itemStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。

3.9. series-type.itemStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。

3.10. series-type.itemStyle.opacity = 1图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。

3.11. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图形样式配置</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px; border: 1px solid;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '图形样式配置'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: '55%',  // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
		            roseType: 'area', // 把饼图显示成南丁格尔图
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告', itemStyle: { color: '#FF0000' } },
                        { value: 274, name: '联盟广告', itemStyle: { color: '#00FF00' } },
                        { value: 310, name: '邮件营销', itemStyle: { color: '#0000FF' } },
                        { value: 335, name: '直接访问', itemStyle: { color: '#000000' } },
                        { value: 400, name: '搜索引擎', itemStyle: { color: '#800000' } }
		            ],
                    itemStyle: { // 图形样式配置。
                       	borderColor: '#000', // 描边颜色。
                        borderWidth: 5, // 描边宽度, 默认不描边。
                        borderType: 'dotted', // 描边类型, 默认为实线, 支持'dashed'和'dotted'。
                        borderRadius: 10, // 圆角半径, 单位px, 支持传入数组分别指定4个圆角半径。
                        shadowBlur: 200, // 图形阴影的模糊大小。
                        shadowColor: 'rgba(64, 158, 255, 0.9)', // 阴影颜色。
                        shadowOffsetX: 100, // 阴影水平方向上的偏移距离。
                        shadowOffsetY: 30 // 阴影垂直方向上的偏移距离。
                    }
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.12. 效果图

4. 线条样式series-line.lineStyle

4.1. series-line.lineStyle.color = 'auto'线的颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。

4.2. series-line.lineStyle.width = 2线宽。number类型。

4.3. series-line.lineStyle.type = 'solid'线的类型。可选的值有'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合dashOffset可实现更灵活的虚线效果。string、number或Array类型。

4.4. series-line.lineStyle.dashOffset用于设置虚线的偏移量。number类型。

4.5. series-line.lineStyle.cap = 'butt'用于指定线段末端的绘制方式, 可以是: 'butt'线段末端以方形结束; 'round'线段末端以圆形结束; 'square'线段末端以方形结束, 但是增加了一个宽度和线段相同, 高度是线段厚度一半的矩形区域。默认值为'butt'。string类型。

4.6. series-line.lineStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。

4.7. series-line.lineStyle.shadowColor阴影颜色。支持的格式同color。Color类型。

4.8. series-line.lineStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。

4.9. series-line.lineStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。

4.10. series-line.lineStyle.opacity图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。

4.11. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>线条样式配置</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '线条样式配置'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {
		          type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
		        },
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [89.3, 92.1, 94.4, 85.4], // 系列中的数据内
                    lineStyle: { // 线条样式配置。
                      color: '#F00', // 线的颜色。
                      width: 8, // 线宽。
                      type: [15, 20], // 线的类型。
                      dashOffset: 10, // 用于设置虚线的偏移量。
                      cap: 'round', // 线段末端以圆形结束。
                      shadowBlur: 20, // 图形阴影的模糊大小。
                      shadowColor: 'rgb(0, 255, 0)', // 阴影颜色。
                      shadowOffsetX: 100, // 阴影水平方向上的偏移距离。
                      shadowOffsetY: 30, // 阴影垂直方向上的偏移距离。
                      opacity: 0.9 // 图形透明度
                    }
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.12. 效果图

5. 区域填充样式series-line.areaStyle

5.1. 区域填充样式, 设置后显示成区域面积图。

5.2. series-line.areaStyle.color = "#000"填充的颜色。支持使用rgb(255,255,255), rgba(255,255,255,1), #fff等方式设置为纯色, 也支持设置为渐变色和纹理填充, 具体见option.color。Color类型。

5.3. series-line.areaStyle.origin = 'auto'图形区域的起始位置。默认情况下, 图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间, 或者坐标轴最小值到数据间, 则可以通过这个配置项进行设置。可选值包括'auto'(默认值)填充坐标轴轴线到数据间的区域; 'start'填充坐标轴底部(非inverse情况是最小值)到数据间的区域; 'end'填充坐标轴顶部(非inverse情况是最大值)到数据间的区域。string类型。

5.4. series-line.lineStyle.shadowBlur图形阴影的模糊大小。该属性配合shadowColor, shadowOffsetX, shadowOffsetY一起设置图形的阴影效果。number类型。

5.5. series-line.lineStyle.shadowColor阴影颜色。支持的格式同color。Color类型。

5.6. series-line.lineStyle.shadowOffsetX阴影水平方向上的偏移距离。number类型。

5.7. series-line.lineStyle.shadowOffsetY阴影垂直方向上的偏移距离。number类型。

5.8. series-line.lineStyle.opacity图形透明度。支持从0到1的数字, 为0时不绘制该图形。number类型。

5.9. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>区域填充样式</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '区域填充样式'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2022']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {},
		        // 系列列表
		        series: [
		          {
		            name: '2022', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [97.7, 83.1, 92.5, 78.1], // 系列中的数据内容
		            stack: '销量',
      				areaStyle: {
        			  color: '#ff0',
        			  origin: 'end',
        			  opacity: 0.1
      				}
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

5.10. 效果图

6. 图形上的文本标签series-type.label

6.1. 图形上的文本标签, 可用于说明图形的一些数据信息, 比如值, 名称等。

6.2. series-type.label.show是否显示标签。boolean类型。

6.3. series-type.label.distance = 5距离图形元素的距离。number类型。

6.4. series-type.label.rotate标签旋转。从-90度到90度。正值是逆时针。number类型。

6.5. series-type.label.offset是否对文字进行偏移。默认不偏移。例如: [30, 40]表示文字在横向上偏移30, 纵向上偏移40。Array类型。

6.6. series-type.label.color文字的颜色。Color类型。

6.7. series-type.label.fontStyle文字字体的风格。可选: 'normal'、'italic'和'oblique'。string类型。

6.8. series-type.label.fontWeight文字字体的粗细。可选: 'normal'、'bold'、'bolder'、'lighter'和100 | 200 | 300 | 400...。string和number类型。

6.9. series-type.label.fontFamily文字的字体系列。还可以是'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...。string类型。

6.10. series-type.label.fontSize文字的字体大小。number类型。

6.11. series-type.label.align文字水平对齐方式, 默认自动。可选: 'left'、'center'和'right'。string类型。

6.12. series-type.label.verticalAlign文字垂直对齐方式, 默认自动。可选: 'top'、'middle'和'bottom'。string类型。

6.13. series-type.label.lineHeight行高。number类型。

6.14. series-type.label.backgroundColor文字块背景色。string类型。

6.15. series-type.label.borderColor文字块边框颜色。Color类型。

6.16. series-type.label.borderWidth文字块边框宽度。number类型。

6.17. series-type.label.borderType文字块边框描边类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合borderDashOffset可实现更灵活的虚线效果。string、number和Array类型。

6.18. series-type.label.borderDashOffset用于设置虚线的偏移量, 可搭配borderType指定dash array实现灵活的虚线效果。number类型。

6.19. series-type.label.borderRadius文字块的圆角。number和Array类型。

6.20. series-type.label.padding文字块的内边距。number和Array类型。

6.21. series-type.label.shadowColor文字块的背景阴影颜色。Color类型。

6.22. series-type.label.shadowBlur文字块的背景阴影长度。number类型。

6.23. series-type.label.shadowOffsetX文字块的背景阴影X偏移。number类型。

6.24. series-type.label.shadowOffsetY文字块的背景阴影Y偏移。number类型。

6.25. series-type.label.width文本显示宽度。number类型。

6.26. series-type.label.height文本显示高度。number类型。

6.27. series-type.label.textBorderColor文字本身的描边颜色。Color类型。

6.28. series-type.label.textBorderWidth文字本身的描边宽度。number类型。

6.29. series-type.label.textBorderType文字本身的描边类型。可选: 'solid'、'dashed'和'dotted'。自v5.0.0开始, 也可以是number或者number数组, 用以指定线条的dash array, 配合textBorderDashOffset可实现更灵活的虚线效果。string、number和Array类型。

6.30. series-type.label.textBorderDashOffset用于设置虚线的偏移量, 可搭配textBorderType指定dash array实现灵活的虚线效果。number类型。

6.31. series-type.label.textShadowColor文字本身的阴影颜色。Color类型。

6.32. series-type.label.textShadowBlur文字本身的阴影长度。number类型。

6.33. series-type.label.textShadowOffsetX文字本身的阴影X偏移。number类型。

6.34. series-type.label.textShadowOffsetY文字本身的阴影Y偏移。number类型。

6.35. series-type.label.overflow文字超出宽度是否截断或者换行。配置width时有效。'truncate' 截断, 并在末尾显示ellipsis配置的文本, 默认为...; 'break'换行; 'breakAll'换行, 跟'break'不同的是, 在英语等拉丁文中, 'breakAll'还会强制单词内换行。string类型。

6.36. series-type.label.position标签的位置。支持: top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。string和Array类型。

6.37. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图形上的文本标签</title>
		<!-- 引入echarts.js -->
		<script type="text/javascript" src="echarts.js"></script>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '图形上的文本标签'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['2020']
		        },
		        // 配置要在X轴显示的项
		        xAxis: {
    			  type: "category", // 类目
    			  data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
  				},
		        // 配置要在Y轴显示的项
		        yAxis: {
		          type: 'value' // 在实际的应用中, 如果是'value'类型, 也可以省略不写。
		        },
		        // 系列列表
		        series: [
		          {
		            name: '2020', // 系列名称
		            type: 'line', // 系列图表类型
		            data: [89.3, 92.1, 94.4, 85.4], // 系列中的数据内
        			label: {
          			  show: true, // 是否显示标签
          			  distance: 30, // 距离图形元素的距离
          			  rotate: 30, // 标签旋转
          			  offset: [30, 40], // 是否对文字进行偏移
          			  color: '#0f0', // 文字的颜色。
          			  fontStyle: 'oblique', // 文字字体的风格。
          			  fontWeight: 'bolder', // 文字字体的粗细。
          			  fontFamily: 'sans-serif', // 文字的字体系列。
          			  fontSize: 20, // 文字的字体大小。
          			  align: 'right', // 文字水平对齐方式, 默认自动。
          			  verticalAlign: 'bottom', // 文字垂直对齐方式, 默认自动。
          			  lineHeight: 60, // 行高。
          			  backgroundColor: 'red', // 文字块背景色。
          			  borderColor: '#00f', // 文字块边框颜色。
          			  borderWidth: 3, // 文字块边框宽度。
          			  borderType: [5, 1], // 文字块边框描边类型。
          			  borderDashOffset: 5, // 用于设置虚线的偏移量
          			  borderRadius: [5, 10, 5, 10], // 文字块的圆角。
          			  padding: [0, 9, 0, 0], // 文字块的内边距。
          			  position: 'bottom' // 标签的位置。
        			}
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

6.38. 效果图

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大屏展示项目开发常用属性
qq_53721052的博客
01-12 776
大屏展示项目开发常用属性
2020-11-05
weixin_44927868的博客
11-05 112
实现效果： 设置各图例间的间距需在series下面设置itemStyle属性：` itemStyle:{ normal:{ borderColor:’#110145’, borderWidth:2 } } 其中borderColor是设置边距的背景色，一般我们设置为和大图背景相同的背景色，这样看起来就无违和感； borderWidth是指间距的大小，它是number类型，设置数字即可，无需增加px等像素单位。 现在还需要增加高亮时的间距，同样也在series下面增加属性 emphasis: { itemS
12-Echarts 配置系列之：图表工具栏 Toolbox
最新发布
youyudehan的博客
11-28 6703
快速了解Echarts 中的 toolbox 工具栏，并在工具栏中自定义点击方法，文章中提供截图中的 option 配置代码。
2、echarts配置项-legend
qq_53408739的博客
10-14 1361
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
echarts 属性设置整理
m0_59566097的博客
12-02 3193
echarts属性整理
Lodop6.220_CLodop3.008
08-01
Lodop是一个基于Web的打印控件，它允许用户通过网页直接进行文档打印，而无需安装额外的驱动程序。这一特性极大地简化了打印流程，无论是在企业内部还是跨平台操作，都能实现快速、便捷的打印体验。 在物流行业中，...
C#程序设计-3期（KC008） KC008110200009_数据输入为空的提示.docx
07-12
// 将焦点重新设置回文本框，以便用户可以直接在此处输入 textBox.Focus(); } } ``` 这段代码的工作原理如下： 1. 当用户从文本框`textBox1`移开焦点时，触发`Leave`事件。 2. 事件处理函数`textBox1_Leave`被...
RO42-008v2
03-07
`<head>`包含元数据，如页面标题（`<title>`）、字符集设置（`<meta charset="UTF-8">`）以及CSS和JavaScript引用等。`<body>`则包含实际的可见内容。 二、HTML标签 HTML由一系列标签组成，这些标签描述了网页内容...
CSS样式表常用小技巧收藏
10-31
- **背景图像**: 与内容无关的图片，如背景图案，应该使用`background`属性，而不是直接嵌入内容中。 #### 五、颜色与表格 **1. 颜色的缩写** - **十六进制颜色值**: 定义颜色时可以使用缩写形式，例如`#8899FF`...
Android自定义titlebar中设置progressbar
03-05
在Toolbar的布局中，我们可以直接添加一个ProgressBar，可以通过设置其可见性来控制是否显示进度条： ```xml android:id="@+id/progress_bar" style="?android:attr/progressBarStyleHorizontal" android:...
多图表共用legend
qq_42844063的博客
05-25 2065
​ 因此独立出来的图例实际上也是一个饼图，但是只显示legend，饼图给隐藏了，然后在操作legend的时候使用bus把操作的块传给了其他饼图，并执行函数同步操作，就形成了共用legend，并可操作其他饼图。​ 这四个饼图的legend都是一样的，数据格式也是一样的，只是具体数据内容不一样。多饼图共用一个legend，并且要求legend可以控制所有饼图。​ 2.鼠标放上 饼图强调，并显示tip，移走隐藏。​ 1.legend可以控制某一块饼显隐。一、lengend和 饼图盒子代码。
echarts 配置项手册legend
weixin_41909678的博客
01-13 5652
目录 legend legend.type legend.zlevel legend.z = 2 legend.left，right legend.top，bottom legend.width，height legend.orient = 'horizontal' legend.align = 'auto' legend.padding = 5 legend.itemGap = 10 legend.itemWidth = 10 legend.itemHeight = 10 le
使用echarts第一次实现饼图
qq_43243541的博客
06-18 262
echarts画饼图 话不多说，直接上代码！更多内容请参考echarts官方说明！ // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('tag-items-wt-bt'),'dark'); var param = {legen:[],data:[]}; for(var i = 0; i <...
JS，统计图表大全－－七、拖拽 Drag
懒虫的博客
01-22 502
七、拖拽 Drag 代码： var symbolSize = 20; var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]]; option = { title: { text: 'Try Dragging these Points' }, tooltip: { ...
echarts 自定义图表custom
weixin_43294560的博客
08-12 7844
1、配置series data: [ 维度0 维度1 维度2 维度3 [ 12, 44, 55, 60 ], 这是第一个 dataItem [ 53, 31, 21, 56 ], 这是第二个 dataItem [ 71, 33, 10, 20 ], 这是第三个 dataItem ... ] series:[{ type:'cus
获得echarts饼图需要的series中的data格式
热门推荐
rxt2012kc的博客
04-11 1万+
需求格式series中的dataseries : [ { name: '风险等级', type: 'pie', radius: '55%', center: ['50%', '60%'], /* data: [ {value:300, name:'0~5'}, {v
ECharts 使用series.itemStyle.color设置柱状图颜色透明渐变
旭东怪的博客
10-06 1万+
1 使用详解 series.itemStyle.color 说明：柱条的颜色。 默认从全局调色盘 option.color获取颜色。 默认值：option.color的值。 参数类型：Color。 可选值：请参考以下博客。 ECharts color属性设置（RGB，透明度，线性渐变，径向渐变，纹理填充） 2 原始效果图 3 实现代码（设置柱状图颜色透明渐变） <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> .
echars 柱图X轴滑动鼠标显示所有柱图
maying0124的博客
07-31 920
echars 柱图X轴滑动鼠标显示所有柱图 由于X轴科室很多，所以做了拖动鼠标可以查看所有的科室信息，滑动滚轮要吧改变柱状图的大小多少。主要是添加dataZoom节点 dataset节点，是加载数据为键值对类型， **encode:{ x:‘deptname’, y:‘visit’ }, ** 节点为dataset里数据的 key值对应的 x,y轴的数据 formatter:’{@reg}' $(function(){ charts1 = echarts.init(document.getElementB
echarts legend单项数据添加背景色|背景图
xiaoxiannvh的博客
06-11 8728
echarts legend单项数据添加背景色|背景图
GSK980TD车床数控系统驱动器设置与调试指南
"驱动器设置-qt样式表葵花宝典" 在进行驱动器设置时，对于GSK980TD车床数控系统这样的工业设备，确保正确的系统配置至关重要。驱动器设置涉及到多个状态参数，这些参数直接影响到机床的运行安全和效率。 12.3 驱动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值