echart使用文章：
echarts使用技巧
一、三角形图
// 初始化图表二
initChart2_4() {
var myChart = echarts.init(document.getElementById('chart2_4'))
var option = {
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {//网格距离上下左右的边距
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#8668FF'], // 修改图形颜色
// x轴设置
xAxis : [
{
// 类目轴
type : 'category',
// 坐标轴两边留白（柱状图和y轴之间留空隙）
boundaryGap : true,
// 坐标轴刻度相关设置
axisTick: {show:false},//是否展示标记点
// 配置x轴是否展示线
axisLine: {show:true},
// 坐标轴标签设置
axisLabel: {
show: true, // x轴坐标标签是否显示
// inside: false, // 是否朝内
rotate: 0, // 旋转角度
// margin: 5, // 刻度标签与轴线之间的距离
color: '#fff' // 默认取轴线的颜色
},
// x轴坐标
data : ['2020-09', '2020-10', '2020-11', '2020-12', "2021-01", "2021-02", "2021-03", "2021-04", "2021-05"]
}
],
// y坐标相关
yAxis: [{
// 数值轴
type: 'value',
name: '设备完好率(%)',
// y轴名称样式
nameTextStyle: {
color: '#fff'
},
min: 0, // y坐标刻度最小值
max: 100, // y坐标刻度最大值
interval: 20, // 设置坐标轴分割间隔为50
// 配置y轴坐标线
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- y轴线样式 -------
lineStyle: {
color: '#4C5566',
width: 1,
type: 'solid'
}
},
// 设置Y轴网格线为虚线
splitLine :{ //网格线
lineStyle:{
color: '#4C5566',
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
},
// Y坐标轴的标签（文字）
axisLabel: {
formatter: '{value}', // 显示模板
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: '#fff' // 默认轴线的颜色
}
}],
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [
{
name: '维修',
// type: 'bar', // 柱状图
// 设置柱状图山峰形状（三角形）
// pictorialBar 象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图
type: 'pictorialBar',
//图形形状
symbol: 'triangle',
//位置偏移
barCategoryGap: '-10%',
// 设置图形样式（三角形）
itemStyle: {
// 正常时图形状态的配置
normal: {
// 设置图形（三角形）透明度
opacity: 0.2
},
// 高亮状态的配置（鼠标放在图形上时）
emphasis: {
opacity: 0.9
}
},
barWidth : 10,//柱图宽度
data: [10, 20, 50, 30, 80, 60, 50, 20, 90]
}
]
}
myChart.setOption(option)
},
二、柱状图
// 初始化图表三
initChart3() {
var myChart = echarts.init(document.getElementById('chart3'))
var option = {
// 提示框组件
tooltip: {
// 触发类型（item，axis（柱状图折线图触发），none），为none时不显示提示组件
trigger: 'axis',
// 指示器配置（line（直线）none：无，shadow：阴影指示器）
axisPointer: {
type: 'shadow'
}
},
color: ['#23B8BC'], // 修改图形颜色
// 设置网格
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// 设置X轴
xAxis: {
type: 'value',
// 坐标轴两边留白（柱状图和y轴之间留空隙）
boundaryGap: true,
// 刻度线配置
axisTick: {show:false},//是否展示标记点
// x轴线配置
axisLine: {show:true},//是否展示线
min: 0, // y坐标刻度最小值
max: 1, // y坐标刻度最大值
interval: 0.2, // 强制设置坐标轴分割间隔为50
axisLabel: { // 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: '#fff' // 默认取轴线的颜色
},
// 隐藏X网格线
splitLine :{ //网格线
show:false //隐藏或显示
}
},
yAxis: {
type: 'category',
// 坐标轴两边留白（柱状图和y轴之间留空隙）
boundaryGap : true,
// 刻度值
axisTick: {show:false},//是否展示标记点
axisLine: {show:true},//是否展示线
axisLabel: { // 坐标轴的标签
// formatter: '{value}',
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: '#fff', // 默认轴线的颜色
},
data: ['05/18', '05/17', '05/16', '05/15', '05/14', '05/13']
},
series: [
{
name: '报警',
type: 'bar',
barWidth : 10,//柱图宽度
// 展示图形的背景
showBackground: true,
// 图形背景颜色
backgroundStyle: {
color: 'rgba(0, 0, 0,0.3 )'
},
// 设置圆柱图形样式
itemStyle: {
// 正常时样式
normal: {
// 圆角
barBorderRadius: 40,
// 设置顶部数组样式
label: {
show: true,
textStyle: {
fontWeight: 'bolder',
fontSize: '12',
fontFamily: '微软雅黑'
},
position: 'right'
},
// 设置不同值的图形为不同颜色样式
color: function (params) {
var colorList = [
'#E66860', '#33B2A6'
]
if (params.value > 0.8 || params.value === 0.8) {
return colorList[0]
} else {
return colorList[1]
}
}
},
// 鼠标滑入高亮时的样式
emphasis: {
barBorderRadius: 40
}
},
data: [0, 0.2, 0.3, 0.8, 0.2, 0.1]
}
]
}
myChart.setOption(option)
},
三、饼图
// 图标4的第二个图
initChart4_2() {
var myChart = echarts.init(document.getElementById('chart4_2'))
var option = {
color: ['#0056E9', '#188FFE', '#04FFD6', '#23B8BC', '#F2C95F', '#FF4747', '#FFFFFF'], // 设置环形图各个区块的颜色
// 点击每块区域的弹出层显示
tooltip: {
trigger: 'item', // 标题
formatter: '{a} <br/>{b}: {c} ({d}%)' // 数据的显示方式
},
// 设置环形图项
legend: {
orient: 'vertical', // 图项的显示方式，垂直显示
// 图项形状（圆形）
icon: 'circle',
// 图项位置（x和y方向的位置）
y: 'center', //延Y轴居中
x: 'right', //居右显示
align: 'left',
textStyle: {
color: '#fff' // 图项字体颜色
},
data: ['机械类', '电器自控类', '管网类', '仪器仪表类', '专用购置物类', '设备类别', '信息化类'] // 图项名称
},
// 配置环形图的显示与数据
series: [
{
name: '访问来源', // 弹出层图表名称
type: 'pie', // 饼图
radius: ['40%', '50%'], // 40%内环圆心大小，若为0则为饼图，50%：外环圆心大小
avoidLabelOverlap: false, // 是否启用防止标签重叠策略，默认开启，false则都居中显示，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。
label: {
normal: {
show: false, // 标签不显示，鼠标滑过才显示
position: 'center' // 高亮时标签显示在中间，不写默认显示侧边
},
// 高亮图区的标签样式
emphasis: {
show: true,
// 修改环形中间字体样式
textStyle: {
fontSize: '18',
fontWeight: 'bold',
color: '#fff'
}
}
},
center: ["35%", "53%"],
// 标签的引导线
labelLine: {
normal: {
show: false // 标签的引导线不显示，若显示还可设置线的样式，参考echart文档
}
},
// 展示数据
data: this.data2
}
]
}
myChart.setOption(option)
},
四、面积图
// 图形5-1
initChart5_1() {
var myChart = echarts.init(document.getElementById('chart5_1'))
var option = {
// 提示框组件
tooltip : {
trigger: 'axis',
// 坐标轴指示器配置项
axisPointer: {
// 十字准星指示器
type: 'cross',
// 指示器背景色
label: {
backgroundColor: '#6a7985'
}
}
},
// 图项配置
legend: {
type: 'plain',
icon: 'circle',
// 水平显示
orient: 'horizontal',
y: 'top',
// 设置图项显示位置
padding:[30,0,10,0],
textStyle: {
color: 'rgba(255, 255, 255, 0.5)',
fontFamily: 'Source Han Sans CN',
size: 12,
},
left:'48%',
data:['维修工单数','保养工单数'],
},
grid: {//网格距离上下左右的边距
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
// 类目轴
type : 'category',
// 坐标轴两边留白（柱状图和y轴之间留空隙）
boundaryGap : true,
// 刻度线
axisTick: {show:false},//是否展示标记点
// x坐标线
axisLine: {show:true},//是否展示线
// x轴标签
axisLabel: { // 坐标轴标签
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 5, // 刻度标签与轴线之间的距离
color: '#fff' // 默认取轴线的颜色
},
data : ["2020-11", "2020-12","2021-01", "2021-02", "2021-03", "2021-04", "2021-05"]
}
],
yAxis: [{
type: 'value',
name: '维保工单数（个）',
// Y轴名称样式
nameTextStyle: {
align: "left",
color: 'rgba(255, 255, 255, 0.8)',
size: 12,
fontFamily: 'Source Han Sans CN'
},
min: 0, // y坐标刻度最小值
max: 25, // y坐标刻度最大值
interval: 5, // 强制设置坐标轴分割间隔为50
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- y轴线样式 -------
lineStyle: {
color: '#4C5566',
width: 1,
type: 'solid'
}
},
// 设置网格线为虚线
splitLine :{ //网格线
lineStyle:{
color: '#4C5566',
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
},
axisLabel: { // 坐标轴的标签
formatter: '{value}', // 显示模板
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: '#fff' // 默认轴线的颜色
}
}],
series : [
{
name:'维修工单数',
type:'line',
areaStyle: {},//是否显示范围背景色
// 使用yAxis数组的第几项（当有双y轴时，使用0，1）
yAxisIndex: 0,/*y轴*/
smooth: true,//是折线还是曲线
itemStyle: { //设置范围背景色的样式
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: '#23B8BC',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#23B8BC'
}
},
},//线条样式
data:[2, 12, 8, 10, 9, 15,6]
},
{
name:'保养工单数',
type:'line',
areaStyle: {},
yAxisIndex: 0,/*y轴*/
smooth: true,
// 使用yAxis数组的第几项（当有双y轴时，使用0，1）
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: '#1F80F1',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: '#1F80F1'
}
},
},//线条样式
data: [3,10, 6, 12, 7, 12,9]
}
]
}
myChart.setOption(option)
},
五、圆角柱状图
// 初始化右边图二部分
initChart5_2() {
var myChart = echarts.init(document.getElementById('chart5_2'))
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {//网格距离上下左右的边距
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#23B7BB', '#8064F3'], // 修改图形颜色
// 图项设置
legend: {
icon: 'circle',
data: ['维修', '保养'],
// 设置位置
padding:[30,0,10,0],
left:'70%',
textStyle: { // 图列内容样式
color: 'rgba(255, 255, 255, 0.5)',
fontFamily: 'Source Han Sans CN',
size: 12,
}
},
// x轴设置
xAxis : [
{
type : 'category',
boundaryGap : true,
axisTick: {show:false},//是否展示标记点
axisLine: {show:true},//是否展示线
axisLabel: { // 坐标轴标签
show: true, // 是否显示
// inside: false, // 是否朝内
rotate: 0, // 旋转角度
// margin: 5, // 刻度标签与轴线之间的距离
color: '#fff' // 默认取轴线的颜色
},
data : ["2021-01", "2021-02", "2021-03", "2021-04", "2021-05"]
}
],
// y坐标相关
yAxis: [{
type: 'value',
name: '维保工时(小时)',
nameTextStyle: {
align: "left",
color: 'rgba(255, 255, 255, 0.8)',
size: 12,
fontFamily: 'Source Han Sans CN'
},
min: 0, // y坐标刻度最小值
max: 250, // y坐标刻度最大值
interval: 50, // 强制设置坐标轴分割间隔为50
axisLine: { // 坐标轴 轴线
show: true, // 是否显示
// ----- y轴线样式 -------
lineStyle: {
color: '#4C5566',
width: 1,
type: 'solid'
}
},
// 设置网格线为虚线
splitLine :{ //网格线
lineStyle:{
color: '#4C5566',
type:'dashed' //设置网格线类型 dotted：虚线 solid:实线
},
show:true //隐藏或显示
},
axisLabel: { // 坐标轴的标签
formatter: '{value}', // 显示模板
show: true, // 是否显示
inside: false, // 是否朝内
rotate: 0, // 旋转角度
margin: 8, // 刻度标签与轴线之间的距离
color: '#fff' // 默认轴线的颜色
}
}],
// 系列列表。每个系列通过 type 决定自己的图表类型
series: [
{
name: '维修',
type: 'bar', // 柱状图
barWidth : 10,//柱图宽度
// 设置柱状图圆角
itemStyle: {
normal: {
barBorderRadius: 40
},
emphasis: {
barBorderRadius: 40
}
},
data: [100, 60, 150, 220, 10]
},
{
name: '保养',
type: 'bar',
barWidth : 10,//柱图宽度
itemStyle: {
// 正常时
normal: {
// 图形圆角
barBorderRadius: 40
},
// 高亮时
emphasis: {
barBorderRadius: 40
}
},
data: [10, 10, 20, 100, 60]
}
]
}
myChart.setOption(option)
},
4820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
