<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<!-- <script src="echarts.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
//鼠标hover时候的提示框
tooltip: {
trigger: 'axis', //触发类型；轴触发，axis表示鼠标hover一条竖线显示全部数据，item表示点击某个折线点显示相应数据
axisPointer: {
type: 'cross',//默认为line，line直线，cross十字准星，shadow阴影
crossStyle: {
color: 'red'
}
}
},
//样例标识（data需要和series中的那么相同，才会显示）
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, {
value: 43,
// 设置单个柱子的样式
itemStyle: {
color: '#91cc75',
shadowColor: '#91cc75',
borderType: 'dashed',
opacity: 0.5
}
}, 10, 10, 20],
barWidth: '40%',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
stack: 'x'//堆叠柱状图
},
{
data: [10, 22, 28, 43, 49],
type: 'bar',
stack: 'x'
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<!-- <script src="echarts.js"></script> -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
axisPointer: { type: 'cross' }
},
legend: {
//必须与series中的name相同
data: ['降水量', '温度']
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true//x轴分割线的位置
},
data: [
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月'
]
}
],
yAxis: [
{
type: 'value',
name: '降水量',
min: 0,
max: 250,
position: 'right',
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
position: 'left',
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: '降水量',
type: 'bar',
yAxisIndex: 0,
data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]
},
{
name: '温度',
type: 'line',
symbol: 'none', //这句就是去掉点的
// smooth: true,//让折线变平滑的
yAxisIndex: 1,//在yAxis 中写入两组数据，使用 yAxisIndex 属性设置系列与哪个y 轴相关联
data: [
6.0,
10.2,
10.3,
11.5,
10.3,
13.2,
14.3,
16.4,
18.0,
16.5,
12.0,
5.2
],
lineStyle: {
normal: {
color: 'green',
width: 4,
type: 'dashed'//设置线的类型 虚线(dashed)、实线(solid)
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
axisLabel
本文含有隐藏内容，请 开通VIP 后查看