您现在的位置是：首页 > 技术教程 正文

ECharts教程(详细)

admin 阅读： 2024-04-02
后台-插件-广告管理-内容页头部广告（手机）

ECharts教程(详细)

非常全面的ECharts教程，非常全面的ECharts教程，目前线条/节点颜色、线条粗细、线条样式、线条阴影、线条平滑、线条节点大小、线条节点阴影、线条节点边框、线条节点边框阴影、工具提醒、工具提醒样式、工具自定义提醒、工具提醒背景、工具提醒边框、工具提醒阴影、工具提醒文字样式、工具箱、工具箱图标、工具箱标题、工具箱功能、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示、类别显示位置、类别显示图标、类别显示图标大小、类别显示图标间距、类别显示图标文字大小、类别显示图标文字颜色、轴方向等多达四十个快捷键使多达四十个快捷键使用。

可以在使用过程中轻松应对大部分场景。由于时间原因，本文只更新全文的10%。以下时间会持续更新，ECharts 是一个常用的工具，但苦涩的 API 常常让人困惑。建议收藏一份，以方便使用时快速查找和解决问题。

这些内容需要一定的echarts理解基础知识。可以访问https://echarts.apache.org/examples/zh/editor.html?c=line-simple 按照教程在线学习。

文章目录

  • ECharts教程(详细)
    • 1：线条/节点颜色
    • 2：线条粗细
    • 3：线条样式
    • 4：线条阴影
    • 5：线条平滑
    • 6：线条节点大小
    • 7：线条节点阴影
    • 8：线条节点边框
    • 9：线条节点边框阴影
    • 10：工具提醒
    • 11：工具提醒样式
    • 12：工具自定义提醒
    • 13：工具提醒背景
    • 14：工具提醒边框
    • 15：工具提醒阴影
    • 16：工具提醒文字样式
    • 17：工具箱
    • 18：工具箱图标
    • 19：工具箱标题
    • 20：工具箱功能
    • 21：类别显示
    • 22：类别显示位置
    • 23：类别显示图标
    • 24：类别显示图标大小
    • 25：类别显示图标间距
    • 26：类别显示图标文字大小
    • 27：类别显示图标文字颜色
    • 28：轴方向（同其他，如柱状图等）
    • 29：坐标轴名称
    • 30：坐标轴名称位置
    • 31：坐标轴名称文字样式
    • 32：坐标轴名称与轴线之间的距离
    • 33：显示标签
    • 34：标签位置
    • 35：标签文字样式
    • 36：标签背景色
    • 37：标签边框
    • 38：标签边框圆角
    • 39：标签内边距
    • 40：标签阴影
    • 41：标签旋转
    • 42：x轴内容偏移
    • 43：x轴内容样式
    • 44：持续更新中 ......

1：线条/节点颜色

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF' } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

在这里插入图片描述

2：线条粗细

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', width: 3 } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

3：线条样式

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', width: 3, type: 'dashed' } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这里插入图片描述

4：线条阴影

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', width: 3, type: 'dashed', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, shadowOffsetY: 10 } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

5：线条平滑

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', smooth: true, itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', width: 3, type: 'dashed', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, shadowOffsetY: 10 } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

6：线条节点大小

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', symbol: 'circle', symbolSize: 20, itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这里插入图片描述

7：线条节点阴影

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', symbol: 'circle', symbolSize: 20, itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, areaStyle: { color: 'rgba(0, 0, 0, 0.5)' } } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

8：线条节点边框

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', symbol: 'circle', symbolSize: 20, itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, borderColor: '#409EFF', borderWidth: 5 } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

9：线条节点边框阴影

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', symbol: 'circle', symbolSize: 20, itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, borderColor: '#409EFF', borderWidth: 5, shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, shadowOffsetY: 10 } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述

10：工具提醒

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis' }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这里插入图片描述

11：工具提醒样式

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', formatter: '{b}
{a}: {c}' }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

12：工具自定义提醒

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', formatter: function (params) { return params[0].name + '
hello world' } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

13：工具提醒背景

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', backgroundColor: '#E6A23C' }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

14：工具提醒边框

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', borderColor: '#409EFF', borderWidth: 15 }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

15：工具提醒阴影

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10, shadowOffsetY: 10 }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

16：工具提醒文字样式

series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', itemStyle: { normal: { color: '#E6A23C', lineStyle: { color: '#409EFF', }, } }, tooltip: { trigger: 'axis', textStyle: { color: '#409EFF', fontSize: 20 } }, } ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

在这里插入图片描述

17：工具箱

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { saveAsImage: {} } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

18：工具箱图标

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { saveAsImage: { icon: 'image://https://img.88icon.com/download/jpg/202001/388cc11b509232e7b5a2340742aba2ef.jpg!88con' } } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

19：工具箱标题

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { saveAsImage: { title: '保存为图片' } } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

20：工具箱功能

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, toolbox: { feature: { dataZoom: {}, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这里插入图片描述

21：类别显示

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

在这里插入图片描述

22：类别显示位置

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], left: 'right' }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在这里插入图片描述

23：类别显示图标

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], icon: 'circle' }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在这里插入图片描述

24：类别显示图标大小

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], icon: 'circle', itemWidth: 20, itemHeight: 20 }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

在这里插入图片描述

25：类别显示图标间距

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], icon: 'circle', itemGap: 20 }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

在这里插入图片描述

26：类别显示图标文字大小

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], icon: 'circle', textStyle: { fontSize: 20 } }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在这里插入图片描述

27：类别显示图标文字颜色

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, legend: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], icon: 'circle', textStyle: { color: 'red' } }, series: [ { name:'Mon', data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }, { name:'Tue', data: [50, 30, 24, 18, 35, 47, 60], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

在这里插入图片描述

28：轴方向（同其他，如柱状图等）

option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

在这里插入图片描述

29：坐标轴名称

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: '我是Y轴名称' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这里插入图片描述

30：坐标轴名称位置

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: '我是Y轴名称', nameLocation: 'middle' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这里插入图片描述

31：坐标轴名称文字样式

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: '我是Y轴名称', nameTextStyle: { color: 'red', fontSize: 20 } }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

32：坐标轴名称与轴线之间的距离

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value', name: '我是Y轴名称', nameGap: 20 }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line' } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

在这里插入图片描述

33：显示标签

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

在这里插入图片描述

34：标签位置

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, position: 'left' } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

35：标签文字样式

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, position: 'left', textStyle: { color: 'red', fontSize: 20 } } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

在这里插入图片描述

36：标签背景色

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, textStyle: { color: 'red', fontSize: 20 }, backgroundColor: 'yellow' } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

在这里插入图片描述

37：标签边框

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, borderColor: 'blue', borderWidth: 2 } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

在这里插入图片描述

38：标签边框圆角

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, borderRadius: 10 } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

39：标签内边距

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, borderColor: 'blue', borderWidth: 5, borderRadius: 10, padding: 10 } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

在这里插入图片描述

40：标签阴影

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, borderColor: 'blue', borderWidth: 1, padding: 10, shadowColor: 'red', shadowBlur: 10, shadowOffsetX: 1, shadowOffsetY: 1 } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

在这里插入图片描述

41：标签旋转

option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', label: { show: true, rotate: 45 } } ] };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

在这里插入图片描述

---------更新 2013 04 13---------

42：x轴内容偏移

xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { interval: 0, rotate: 40 } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在这里插入图片描述

43：x轴内容样式

xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLabel: { textStyle: { color: 'red' } } },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

在这里插入图片描述

44：持续更新中 …

如果命名不合适，或者遇到这里没有收录的内容，请留言，我会以更快的速度更新。

目前只更新了比较常用的部分，以后会持续更新…

标签:
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

在线投稿：投稿 站长QQ：1888636

后台-插件-广告管理-内容页尾部广告（手机）
相关文章
关注我们

扫一扫关注我们，了解最新精彩内容

搜索
排行榜
最近发表
标签列表