1，echarts画折线图，重叠折线图。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
function regionalMap() {
//渲染为svg(默认是canvas)
var myChartFour = echarts.init(document.getElementById('main'),"",{renderer:"svg"});
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
},
}
},
legend: {
data: ['邮件营销', '搜索引擎', "广告植入"],
x: 'left',
//位置
orient: 'vertical', // 'vertical'/horizontal
x: 'left', // 'center' | 'left' | {number},
y: 'center', // 'center' | 'bottom' | {number}
},
color: ["#0080ff", "#4cd5ce"],
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {//调整折线图图线内容部分相对于父元素位置
left: '18%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLine: {//不显示y轴
show: false
},
axisTick: {//不显示y轴刻度线
show: false
},
splitLine: {//不显示网格线
show: false
},
}
],
yAxis: [
{
type: 'value',
axisLine: {//不显示y轴
show: false
},
axisTick: {//不显示y轴刻度线
show: false
},
splitLine: {//不显示网格线
show: false
},
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
symbol: "none", //去掉折线上的小圆点
itemStyle: {
opacity: 0,
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: "red", //背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "white"
}
},
emphasis: {
color: '#4fd6d2',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: "white" //折线的颜色
}
}
},//线条样式
symbolSize: 5, //折线点的大小
areaStyle: { normal: {} },
data: [320, 332, 601, 134, 120, 230, 210]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
symbol: "none", //去掉折线上的小圆点
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: "blue", //背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "white" //折线的颜色
}
},
emphasis: {
color: '#0180ff',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: "white"
}
}
},//线条样式
symbolSize: 5, //折线点的大小
label: {
normal: {
show: false,
position: 'top'
}
},
areaStyle: { normal: {} },
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: '广告植入',
type: 'line',
stack: '总量',
symbol: "none", //去掉折线上的小圆点
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: "orange", //背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "white" //折线的颜色
}
},
emphasis: {
color: '#0180ff',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: "white"
}
}
},//线条样式
symbolSize: 5, //折线点的大小
label: {
normal: {
show: false,
position: 'top'
}
},
areaStyle: { normal: {} },
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChartFour.setOption(option);
}
regionalMap()
</script>
</body>
</html>借鉴自：
option = {
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
},
}
},
legend: {
data:['邮件营销','搜索引擎'],
x: 'left'
},
color: ["#0080ff","#4cd5ce"],
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'邮件营销',
type:'line',
stack: '总量',
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
offset: 0, color: '#d7f4f8' // 0% 处的颜色
}, {
offset: 0.5, color: '#eefcfd' // 100% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
), //背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "#4fd6d2"
}
},
emphasis: {
color: '#4fd6d2',
lineStyle: { // 系列级个性化折线样式
width:2,
type: 'dotted',
color: "#4fd6d2" //折线的颜色
}
}
},//线条样式
symbolSize:5, //折线点的大小
areaStyle: {normal: {}},
data:[320, 332, 601, 134, 120, 230, 210]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
itemStyle: {
normal: { //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
offset: 0, color: '#81befd' // 0% 处的颜色
}, {
offset: 0.4, color: '#e4f2ff' // 100% 处的颜色
}, {
offset: 1, color: '#fff' // 100% 处的颜色
}]
), //背景渐变色
lineStyle: { // 系列级个性化折线样式
width: 3,
type: 'solid',
color: "#0180ff" //折线的颜色
}
},
emphasis: {
color: '#0180ff',
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'dotted',
color: "0180ff"
}
}
},//线条样式
symbolSize:5, //折线点的大小
label: {
normal: {
show: true,
position: 'top'
}
},
areaStyle: {normal: {}},
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};2.echarts 柱状图叠加
未完待续。。。
参考自：
app.title = '堆叠条形图';
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['直接访问', '邮件营销','联盟广告','视频广告','搜索引擎']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '直接访问',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [302, 302, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'bar',
stack: '总量',
smooth: true,
label: {
normal: {
show: true,
position: 'insideTop',
formatter: function(v) {
return v.value || ""
}
}
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
},
{
name: '总计',
type: 'bar',
stack: '总计',
barGap: '-100%',
smooth: true,
label: {
normal: {
show: true,
position: 'top',
textStyle: { color: '#000' },
formatter: function(v) {
return "总计：" + (v.value)
}
}
},
itemStyle: {
normal: {
color: 'rgba(128, 128, 128, 0)',
borderWidth: 1,
borderColor: '#1FBCD2'
}
},
data: [1600,1600,1600,1600,1600,2600]
}
]
};
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
