一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
重点
注意
DIV的ID要与var myChart = echarts.init(document.getElementById('mainecharts'));里的ID保持一致，
并且ID要设置宽高，否则不显示。
斜体字
type: 'category',axisLabel: { interval: 0, rotate: 30 }
柱状图的宽度
barWidth : 30,
不渐变颜色
itemStyle: {
color: '#a90000'
}
渐变颜色
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="mainecharts" style="width: 500px;height:500px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('mainecharts'));
// 指定图表的配置项和数据
var optiontb = {
title: { text: '统计任务数量' },//标题
tooltip: {},
legend: { data:['销量'] },
xAxis: {
data: ["巡检","巡线","养护","案件"],
type: 'category',
axisLabel: { interval: 0, rotate: 30 }
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
barWidth : 30,
data: [5, {
value: 200,
//可以给某个单独定义颜色 可以是渐变的
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
}, 36, 10]//值
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(optiontb); </script>
</body>
</html>
效果
柱状图加折线
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['个数', '办结率']
},
xAxis: [
{
type: 'category',
data: ['巡检', '巡线', '养护', '案件'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '个数',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} 个'//加单位
}
},
{
type: 'value',
name: '办结率',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %'//加单位
}
}
],
series: [
{//柱状图
name: '个数',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' 个';
}
},
data: [
30, 40, 20, 23
]
},
{//折线图
name: '办结率',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' %';
}
},
data: [2.0, 2.2, 3.3, 4.5]
}
]
};
效果
每天进步亿点点！！！
