<div style="display:flex;justify-content: space-around;">
<div id="columnar" style="width: 500px;height:300px;" />
<div id="brokenLine" style="width: 500px;height:300px;" />
</div>
var echarts = require('echarts')
require('echarts/lib/chart/line')
drawLine(){
let _this = this
const options ={
title: {
text: '近7日页面用户访问量',
left: 'center',
top:'30',
textStyle:{
fontSize:14,//标题文字大小
},
},
color: ['#39a0ff'],
xAxis: {
type: 'category',
data: _this.sevenKey,
axisLine:{
lineStyle:{
color:'#727273' //x轴线的颜色
}
},
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'line',//鼠标移入显示竖线
lineStyle: {//鼠标移入背景图
color: "#ebf0f9",
width: 50,
type: "solid",
},
label: {
backgroundColor: '#39a0ff',//值颜色
},
z:0,
},
formatter: "{b}<br/><div style='display: flex;align-items: center;'><div style='width: 10px;border-radius: 50%;background: rgb(57, 160, 255);height: 10px;'></div><div>访问量 : {c}</div> </div> "//鼠标移入柱状图显示内容
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#727273' //y轴线的颜色
}
},
splitLine :{
lineStyle:{
type:'dashed'//表格横轴虚线
},
show: true, //隐藏
},
},
series: [
{
data: _this.sevenVal,
type: 'bar',
emphasis: { label: { show: true ,position:'top'} },//鼠标移动到柱状图上显示值
}
]
}
const options2 = {
title: {
text: '近7日页面用户访问趋势图',
left: 'center',
top:'30',
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'line',
label: {
backgroundColor: '#39a0ff',
type:"solid"
},
z:0,
},
formatter: "{b}<br/><div style='display: flex;align-items: center;'><div style='width: 10px;border-radius: 50%;background: rgb(57, 160, 255);height: 10px;'></div><div>访问量 : {c}</div> </div>"
},
color: ['#39a0ff'],
xAxis: {
type: 'category',
data: _this.sevenKey,
axisLine:{
lineStyle:{
color:'#727273' //x轴线的颜色
}
},
},
yAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'#727273' //y轴线的颜色
}
},
splitLine :{
lineStyle:{
type:'dashed'//表格横轴虚线
},
show: true //隐藏
},
},
series: [
{
data: _this.sevenVal,
type: 'line',
emphasis: { label: { show: true ,position:'top'} },//鼠标移动到柱状图上显示值
},
]
};
const myChart = echarts.init(document.getElementById('columnar'))
const myChart2 = echarts.init(document.getElementById('brokenLine'))
window.onresize = function() {
myChart.resize()
myChart2.resize()
}
myChart.setOption(options)
myChart2.setOption(options2)
},
echarts柱状图,折线图样式
于 2024-05-22 13:45:16 首次发布