效果图
在vue中使用echarts首先安装依赖
npm install echarts -S
或者切换淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install echarts -S
在页面中引用
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/bar");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/toolbox");
如果整个应用图表使用的较多推荐使用全局引入
// 在main.js中引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
这里演示在页面中使用
直接上代码
<div id="myChart" :style="{ width: '90%', height: '4.6rem' }"></div>
created() {
this.getData();
},
//定义一个方法，在方法里面发送请求，获取到数据后再进行渲染，否则渲染失败，个人不推荐定义多个方法。喜欢一个方法即简单解决
async getData() {
console.time("time");//代码执行时间
const data = await this.$http.get(
"自己请求数据的接口"
);
if (data.code == 0) {
data.data.map(item => {
//这里自己定义的假数据
this.dataList.push(item.time.slice(5));
this.abnormalCountList.push(36);
this.normalCountList.push(21);
});
} else {
return this.$message.error("获取统计数据失败");
}
var that = this;
this.loading = false;//这里是自己定义的loading组件显示与隐藏
// 初始化echarts实例
var myChart = echarts.init(document.getElementById("myChart"));
// var options =
myChart.setOption({
title: {
text: "近14天数据",
textStyle: {
fontSize: 18,
fontWeight: "bolder",
color: "#c23531" // 主标题文字颜色
}
},
// 鼠标hover的提示框组件
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
textStyle: {
color: "#c23531" //设置文字颜色
}
}
},
// 右上角工具栏
toolbox: {
show: true, //是否显示工具栏组件
orient: "horizontal", //工具栏icon的布局朝向
itemSize: 18, //工具栏icon的大小
itemGap: 20, //item之间的间距
right: 20, //toolbox的定位位置
feature: {
saveAsImage: {
show: true }, //导出图片
magicType: {
//动态类型切换
type: ["line", "bar", "pie"]
},
restore: {
show: true } //重置
},
iconStyle: {
// color:'#04a0bb'
}
},
legend: {
data: ["A", "B"],
textStyle: {
color: "#ffffff"
}
},
xAxis: {
data: that.dataList,//x轴数据
boundaryGap:false,// true | ['30%', '20%']，x轴两边是否留白,true留白，false不留白
type: "category",
axisPointer: {
//x轴鼠标选中样式
type: "shadow",
color: "#fff"
},
axisLabel: {
//x轴底部字体颜色
textStyle: {
color: "#ffffff"
}
// interval: that.dataList.length - 2 //只显示前后
},
axisLine: {
//x坐标轴轴线
show: true,
lineStyle: {
//x坐标轴轴线样式
color: "red" //'#ccc' 'rgba(128, 128, 128, 0.5)'设置标签颜色
}
}
},
yAxis: {
type: "value",
axisLine: {
show: false
},
axisLabel: {
formatter: "{value} 人"
},
nameTextStyle: {
color: "#fff"
},
axisLabel: {
textStyle: {
color: "#ffffff" //Y轴字体颜色
}
}
},
series: [
{
name: "A",
type: "bar",
data: that.abnormalCountList,
barWidth: 20, //柱图宽度
// data: [1, 2, 3],
itemStyle: {
normal: {
color: "#c23531" //柱图1颜色
}
}
},
{
name: "B",
type: "bar",
data: that.normalCountList,
barWidth: 20, //柱图宽度
// data: [1, 2, 3],
itemStyle: {
normal: {
color: "#2d9761" //柱图2颜色
}
}
}
]
});
console.timeEnd("time");
}