效果
前后端不分离 ,没有用脚手架
HTML
<div id="ecLine" :style="{width: '49.5%', height: '310px'}"></div>
<div id="zhLine" :style="{width: '49.5%', height: '310px'}"></div>
JS
methods: {
//echar图
drawLine() {
// 基于准备好的dom,初始化echarts实例
var myChart1 = echarts.init(document.getElementById('ecLine'));
var myChart2 = echarts.init(document.getElementById('zhLine'));
// 绘制图表
myChart1.setOption({
title:{text:'当日趋势图',
//标题样式
textStyle:{
color:'#000', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:16, //大小
align:'center', //水平对齐
lineHeight:50
},
// title位置
padding:[20, 0, 20, 30]
},
grid:{ //显示数据的图表位于当前canvas的坐标轴
x:50,
y:80,
borderWidth:1,
},
//悬浮显示
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
//折点提示
legend: {
data:['异常台数'],
//折点提示位置
left:'90%',
top:'5%'
},
xAxis: {
type: 'category',
data: ['20190824', '20190825', '20190826', '20190827', '20190828', '20190829', '20190830'],
//轴颜色
axisLine: {
lineStyle: {
color: '#999'
}
},
// 去除分割线
splitLine:{
show:false
},
axisTick:{
show:false
},
},
yAxis: {
name:'台数',
nameTextStyle:{
padding: [0,0,0,-20],
color:'#999999'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
//去除分割线
axisTick:{
show:false
},
type: 'value',
//取消y轴网格
interval: 5,
min:0,
max:20,
scale: true,
show:true,
splitLine:{
show:false
},
},
series: [
{
name:'异常台数',
type:'line',
stack: '总量',
color:'#fccd35',
data:[5, 15, 12, 10, 9, 16, 14]
},
{
// 设置实心点大小
symbolSize: 8,
itemStyle : {
normal : {
color: "#fccd35",
lineStyle:{
color:'#fccd35'
}
}
},
data: [5, 15, 12, 10, 9, 16, 14],
type: 'line'
}]
});
myChart2.setOption({
title: {text: '本月累计趋势图',
textStyle:{
color:'#000', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:16, //大小
align:'center', //水平对齐
lineHeight:50
},
// title位置
padding:[20, 0, 20, 30]
},
legend: {
data:['环比',],
//折点提示位置
left:'85%',
top:'5%'
},
grid:{ //显示数据的图表位于当前canvas的坐标轴
x:50,
y:80,
borderWidth:1,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis : [
{
type : 'category',
data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月'],
axisLine: {
lineStyle: {
color: '#999'
}
},
axisTick:{
show:false
},
},
],
yAxis : [
{
type : 'value',
max: 90,
name:'台数',
interval: 30,
scale: true,
show:true,
splitLine:{
show:false
},
axisTick:{
show:false
},
nameTextStyle:{
padding: [0,0,0,-20],
color:'#999999'
},
axisLine: {
lineStyle: {
color: '#999'
}
},
},
{
type: 'value',
// name: '温度',
min: 0,
max:100,
//取消y轴网格
interval: 25,
scale: true,
show:true,
splitLine:{
show:false
},
axisTick:{
show:false
},
axisLine: {
lineStyle: {
color: '#999'
}
},
}
],
series : [
{
name:'环比',
type:'line',
stack: '总量',
color:'#fccd35',
symbolSize: 8,
yAxisIndex: 1,
data:[30, 15, 42, 65, 38, 40, 78,50]
},
{
name:'柱状图',
type:'bar',
//柱状图宽度
barWidth: '13%',
data:[55,56,40,59,45,23,12,16],
itemStyle:{
normal:{
color:'#84d1d3'
}
},
},
],
});
},
//分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
一表多图
series : [
{
name:'环比',
type:'line',
stack: '总量',
color:'#fccd35',
symbolSize: 8,
//按右边y轴显示
yAxisIndex: 1,
data:[30, 15, 42, 65, 38, 40, 78,50]
},
{
name:'柱状图',
type:'bar',
//柱状图宽度
barWidth: '13%',
data:[55,56,40,59,45,23,12,16],
itemStyle:{
normal:{
color:'#84d1d3'
}
},
},
],