<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#000',
// 图表位置
grid: {
left: 50,
right: 50,
top: 45,
bottom: 30
},
// 提示框
tooltip: {
// 触发类型,默认数据触发,见下图,可选为:'item' ¦ 'axis'
trigger: 'axis',
showContent: true,
formatter: function(params) {
var res = '<div><p>' + params[0].name + '</p></div>'
for (var i = 0; i < params.length; i++) {
res += '<p>' + params[i].seriesName + ':' + params[i].value + '</p>'
}
return res;
}
},
// 图例
legend: {
top: 15,
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.7)'
},
data: ['退订数', '订单数']
},
xAxis: [{
type: 'category',
//去掉坐标轴刻线
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
color: "rgba(255,255,255,.7)"
},
data: ['1月', '', '3月', '', '5月', '', '7月', '', '9月', '', '11月', '']
}],
yAxis: [{
type: 'value',
name: '',
min: 0,
max: 3000,
// 间隔
interval: 500,
//去掉坐标轴刻线
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.3)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,.01)'
}
}
}],
series: [{
name: '退订数',
type: 'bar',
itemStyle: {
normal: {
color: '#FF7F50'
}
},
data: [{
name: '1月',
value: 130
},
{
name: '2月',
value: 120
},
{
name: '3月',
value: 131
},
{
name: '4月',
value: 131
},
{
name: '5月',
value: 131
},
{
name: '6月',
value: 56
},
{
name: '7月',
value: 140
},
{
name: '8月',
value: 135
},
{
name: '9月',
value: 125
},
{
name: '10月',
value: 100
},
{
name: '11月',
value: 135
},
{
name: '12月',
value: 236,
tooltip: {
formatter: function(a) {
return ''
}
}
}
]
},
{
name: '订单数',
type: 'bar',
itemStyle: {
normal: {
color: '#87CEFA'
}
},
data: [{
name: '1月',
value: 1000
},
{
name: '2月',
value: 800
},
{
name: '3月',
value: 820
},
{
name: '4月',
value: 830
},
{
name: '5月',
value: 1700
},
{
name: '6月',
value: 1000
},
{
name: '7月',
value: 820
},
{
name: '8月',
value: 1300
},
{
name: '9月',
value: 1900
},
{
name: '10月',
value: 1100
},
{
name: '11月',
value: 1950
},
{
name: '12月',
value: 2630,
tooltip: {
formatter: function(a) {
return ''
}
}
}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之带提示框的柱形图(一)
最新推荐文章于 2024-03-27 21:21:36 发布