效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 1.导包 -->
<script src="./echarts.js"></script>
</head>
<body>
<!-- 2.写HTML结构 -->
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script>
/* 3.初始化配置 */
//3.1 创建图表
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//3.2 设置图表样式
// 指定图表的配置项和数据
//自定义柱子样式
var item = {
value: 1000,
itemStyle: {
color: '#254065',
opacity: 0.5
},
};
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
//内边距,类似于padding
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
axisTick: {
alignWithLabel: true
},
//x底部文字
axisLabel: {
textStyle: {
color: '#3398DB'
}
},
}
],
yAxis: [
{
type: 'value',
//y左侧文字
axisLabel: {
textStyle: {
color: '#3398DB'
}
},
},
,
{
type: 'value',
//右侧文字
axisLabel: {
textStyle: {
color: '#3398DB'
}
},
}
],
series: [
{
name: '直接访问',
type: 'bar',
barWidth: '60%',
//渐变颜色
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' },
{ offset: 1, color: '#0061ce' },
]
)
},
data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
}
]
};
//3.3 加载图表
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>