Echarts常用命令：
- 初始化Echarts实例：
var myChart = echarts.init(document.getElementById('chart-container'));
- 设置图标配置项和数据：
myChart.setOption(option);
- 获取图标实例配置项：
var option = myChart.getOption();
- 图表事件绑定：
myChart.on('click', function(params) {
// 处理点击事件
});
- Js引入Echarts表：
var chartDom = document.getElementById('biao1'); --填div的id
var myChart = echarts.init(chartDom);
var option;
option = {
代码},
- 标题配置：
title: {
text: '标题',
textStyle: {
color: 'blue',
fontSize: 16,
},
}
- 图例配置：
legend: {
data: ['数据1', '数据2'],
textStyle: {
color: 'green',
fontSize: 12,
},
}
- x轴和y轴配置：
xAxis: {
type: 'category',
data: ['标签1', '标签2'],
axisLabel: {
color: 'red',
fontSize: 12,
},
},
yAxis: {
type: 'value',
axisLabel: {
color: 'orange',
fontSize: 12,
},
}
- 系列配置：
series: [
{
type: 'line',
data: [10, 20, 15],
itemStyle: {
color: 'purple',
},
label: {
show: true,
formatter: '{c}',
textStyle: {
color: 'black',
},
},
},
]
- 饼图配置：
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 335, name: '数据1' },
{ value: 310, name: '数据2' },
],
label: {
show: true,
formatter: '{b}: {c} ({d}%)',
textStyle: {
color: 'brown',
},
},
},
]
- 饼图设置图例字体和颜色:
option = {
legend: {
data: ['数据1', '数据2', '数据3', '数据4', '数据5'],
textStyle: {
color: 'blue', // 设置图例字体颜色为蓝色
fontSize: 12, // 设置图例字体大小
},
},
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 335, name: '数据1' },
{ value: 310, name: '数据2' },
{ value: 234, name: '数据3' },
{ value: 135, name: '数据4' },
{ value: 1548, name: '数据5' }
],
},
],
};
- 数据点上显示数据：
option = {
series: [
{
type: 'scatter', // 使用散点图
data: [
[1, 10],
[2, 20],
[3, 15],
[4, 25],
[5, 30]
],
label: {
show: true,
formatter: '{@[1]}', // 使用 '@' 符号来表示对应数据项的索引
position: 'top', // 标签显示在数据点上方
textStyle: {
color: 'blue', // 设置字体颜色
fontSize: 12, // 设置字体大小
},
},
},
],
};
- 饼图一直显示数据，并设置字体颜色：
option = {
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: 335, name: '数据1' },
{ value: 310, name: '数据2' },
{ value: 234, name: '数据3' },
{ value: 135, name: '数据4' },
{ value: 1548, name: '数据5' }
],
label: {
show: true,
position: 'outside', // 将标签显示在扇形外部
formatter: '{b}: {c} ({d}%)', // 标签的格式，{b}表示名称，{c}表示值，{d}%表示占比
textStyle: {
color: 'red', // 设置字体颜色
fontSize: 12, // 设置字体大小
},
},
},
],
};
- 设置标题颜色和大小：
option = {
title: {
text: '图表标题',
textStyle: {
color: 'blue', // 设置标题颜色为蓝色
fontSize: 18, // 设置标题字体大小为18
},
},
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 15, 25, 30],
},
],
};
- 设置数值点为实心原且设置css样式：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 15, 25, 30],
symbol: 'circle', // 设置点的形状为圆形
symbolSize: 8, // 设置点的大小
itemStyle: {
color: 'white', // 设置点的颜色为白色
borderColor: 'black', // 设置边框颜色，可选
borderWidth: 2, // 设置边框宽度，可选
},
},
],
};
- 设置数值点大小：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 15, 25, 30],
symbolSize: 10, // 设置数值点的大小
},
],
};
- 改变数据线的颜色 css样式：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 15, 25, 30],
lineStyle: {
color: 'red', // 设置线条颜色为红色
},
},
],
};
- 字体倾斜：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
axisLabel: {
rotate: 45, // 设置刻度字体旋转角度，单位是度
},
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: [10, 20, 15, 25, 30],
},
],
};
- 改变x轴刻度css样式：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
axisLabel: {
textStyle: {
fontSize: 12, // 刻度字体大小
color: 'red' // 刻度字体颜色
}
},
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: [10, 20, 15, 25, 30],
},
],
};
- 隐藏x轴 轴线：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
axisLine: {
show: false, // 隐藏 x 轴轴线
},
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: [10, 20, 15, 25, 30],
},
],
};
- 折线变平滑：
option = {
xAxis: {
type: 'category',
data: ['标签1', '标签2', '标签3', '标签4', '标签5'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 15, 25, 30],
smooth: true, // 启用平滑曲线效果
},
],
};
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
