1.没有优化之前的代码
// 柱状图
(function () {
// 1.实例化对象
var myChart = echarts.init(document.querySelector('.bar'));
// 2.指定配置项和数据
var option = {
xAxis: [
{
type: 'category',
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '杭州', '厦门', '济南', '成都', '重启'],
axisTick: {
// true 刻度在柱子正中间 false 柱子在刻度中间
alignWithLabel: true,
// 显示刻度
show: false
},
// 修改x轴文字颜色
axisLabel: {
color: '#4c9bfd'
},
// x轴这条线的颜色样式
axisLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
// width:12,
}
}
},
],
itemStyle: {
color: new echarts.graphic.LinearGradient(
// (x1,y2)点到点(x2,y2)之间进行渐变
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' },//0起始颜色
{ offset: 1, color: '#0061ce' },//1结束颜色
]
),
},
tooltip: {
trigger: 'item',
// axisPointer:{
// // 坐标轴指示器,坐标轴触发有效
// type:'shadow'//默认为直线,可选为:'line | 'shadow
// },
},
grid: {
left: '0%',
right: '4%',
bottom: '3%',
top: '3%',
containLabel: true,
show: true,//右侧表格线
borderColor: 'rgba(0,240,255,0.3)' //四条边框的颜色 前提得show设置true才行
},
yAxis: [
{
type: 'value',
// 修改y轴文字颜色
axisLabel: {
color: '#4c9bfd'
},
// y轴这条线的颜色样式
axisLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
// width:12,
}
},
axisTick: {
// 显示刻度
show: false
},
// y轴分割线的颜色样式
splitLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
}
}
}
],
series: [
{
data: [2100, 1900, 1700, 1560, 1400,
{
name:'',
value:1200,
// 修改当前柱形的样式
itemStyle: {
color:'#254065'
},
// 鼠标放到柱子上不想高亮显示
emphasis:{
itemStyle: {
color:'#254065'
},
},
// 鼠标经过柱子不显示提示框组件
tooltip:{
extraCssText:'opacity:0'
}
},
{
name:'',
value:1200,
// 修改当前柱形的样式
itemStyle: {
color:'#254065'
},
// 鼠标放到柱子上不想高亮显示
emphasis:{
itemStyle: {
color:'#254065'
},
},
// 鼠标经过柱子不显示提示框组件
tooltip:{
extraCssText:'opacity:0'
}
},{
name:'',
value:1200,
// 修改当前柱形的样式
itemStyle: {
color:'#254065'
},
// 鼠标放到柱子上不想高亮显示
emphasis:{
itemStyle: {
color:'#254065'
},
},
// 鼠标经过柱子不显示提示框组件
tooltip:{
extraCssText:'opacity:0'
}
}, 900, 750, 600, 480, 240],
type: 'bar'
}
]
};
// 3.配置项和数据给我们的实例化对象
myChart.setOption(option)
})()
2.要优化那块代码
3.优化后(提取后)的
优化后的代码
// 柱状图
(function () {
// 1.实例化对象
var myChart = echarts.init(document.querySelector('.bar'));
var item = {
name: '',
value: 1200,
// 修改当前柱形的样式
itemStyle: {
color: '#254065'
},
// 鼠标放到柱子上不想高亮显示
emphasis: {
itemStyle: {
color: '#254065'
},
},
// 鼠标经过柱子不显示提示框组件
tooltip: {
extraCssText: 'opacity:0'
}
};
// 2.指定配置项和数据
var option = {
xAxis: [
{
type: 'category',
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '杭州', '厦门', '济南', '成都', '重启'],
axisTick: {
// true 刻度在柱子正中间 false 柱子在刻度中间
alignWithLabel: true,
// 显示刻度
show: false
},
// 修改x轴文字颜色
axisLabel: {
color: '#4c9bfd'
},
// x轴这条线的颜色样式
axisLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
// width:12,
}
}
},
],
itemStyle: {
color: new echarts.graphic.LinearGradient(
// (x1,y2)点到点(x2,y2)之间进行渐变
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' },//0起始颜色
{ offset: 1, color: '#0061ce' },//1结束颜色
]
),
},
tooltip: {
trigger: 'item',
// axisPointer:{
// // 坐标轴指示器,坐标轴触发有效
// type:'shadow'//默认为直线,可选为:'line | 'shadow
// },
},
grid: {
left: '0%',
right: '4%',
bottom: '3%',
top: '3%',
containLabel: true,
show: true,//右侧表格线
borderColor: 'rgba(0,240,255,0.3)' //四条边框的颜色 前提得show设置true才行
},
yAxis: [
{
type: 'value',
// 修改y轴文字颜色
axisLabel: {
color: '#4c9bfd'
},
// y轴这条线的颜色样式
axisLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
// width:12,
}
},
axisTick: {
// 显示刻度
show: false
},
// y轴分割线的颜色样式
splitLine: {
lineStyle: {
color: 'rgba(0,240,255,0.3)',
}
}
}
],
series: [
{
data: [2100, 1900, 1700, 1560, 1400,item, item, item, 900, 750, 600, 480, 240],
type: 'bar'
}
]
};
// 3.配置项和数据给我们的实例化对象
myChart.setOption(option)
})()
效果图
