vue cli 使用echart组件
一.用EChart实现的档期预约甘特图（由阶梯瀑布图转变而来）
1.需求：
2.找了很多关于甘特图的资料，很多都是说明文档不全的，最后还是放弃甘特图。使用EChart实现该需求，关于EChart可以看这里：
EChart
阶梯瀑布图
3.实现的效果如下：
4.开始实现
1.先npm安装echarts
npm install echarts --save
在main.js配置
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2.源代码附上（看了有收获的话麻烦给个赞，源码里面附了说明）
<template>
<div>
<div id="myChart1" :style="{width: '78vw', height: '400px'}"></div>
</div>
</template>
<script>
export default {
name: "echart",
mounted: function() {
this.drawLine();
},
methods: {
//柱状图
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
// 绘制图表
var colors = ["#67C23A", "#F56C6C"]; //自定义两种颜色，也可以使用Echart自带的颜色
myChart1.setOption({
title: {
text: "预约"
},
color: colors, //使用自定义的颜色
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function(params) {
if (params.length > 2) {
var tar;
if (params[1].value !== "-") {
tar = params[1];
} else {
if (params[2].value !== "-") {
tar = params[2];
} else {
tar = params[0];
}
}
return (
tar.name +
"<br/>" +
tar.seriesName +
" : " +
tar.data.startTime +
"-" +
tar.data.endTime +
"<br/>" +
tar.data.content
);
}
}
},
legend: {
data: ["预约中", "已定档"]
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
// name: "时间(时)",
position: "top", //定位到top，X轴显示在上方
top: 5,
axisLine: {
symbol: ["none", "arrow"] //显示X轴的箭头
},
axisLabel: {
formatter: "{value}:00" //这里加上：00，才会显示成0：00到24：00
},
boundaryGap: true,
type: "value",
min: 0,
max: 24,
splitNumber: 24 //X轴分24段，才会显示0到24
},
yAxis: {
type: "category",
splitLine: { show: false },
data: [
{ id: 1, value: "任务1" },
{ id: 2, value: "任务2" },
{ id: 3, value: "任务3" },
{ id: 4, value: "任务4" },
{ id: 5, value: "任务5" },
{ id: 6, value: "任务6" },
{ id: 7, value: "任务7" }
],
inverse: true //因为X轴定位在top上，所以Y轴的数据需要倒序排列
},
dataZoom: [
//Y轴滑动条
{
type: "slider", //滑动条
show: true, //开启
yAxisIndex: [0],
left: "0%", //滑动条位置
start: 1, //初始化时，滑动条宽度开始标度
end: 50 //初始化时，滑动条宽度结束标度
},
{
type: "inside", //内置滑动，随鼠标滚轮展示
yAxisIndex: [0],
start: 1, //初始化时，滑动条宽度开始标度
end: 50 //初始化时，滑动条宽度结束标度
}
],
series: [
{
name: "辅助",
type: "bar",
stack: "总量",
itemStyle: {
barBorderColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)"
},
emphasis: {
itemStyle: {
barBorderColor: "rgba(0,0,0,0)",
color: "rgba(0,0,0,0)",
barBorderRadius: 30
}
},
data: [
{ id: 1, value: 1.5 }, //这里的value就是Y轴的柱状体startTime到Y轴的距离，因为这里显示的时间是时分，所以需要将开始时间转化成24的比例，例如开始时间1:30，这里的value是1.5，开始时间是1:15,这里的value就是约为1.25，柱状体就还有对齐时间点的效果
{ id: 2, value: 2.15 },
{ id: 3, value: 3 },
{ id: 4, value: 9 },
{ id: 5, value: 6 },
{ id: 6, value: 10 },
{ id: 7, value: 7 }
]
},
{
name: "预约中",
type: "bar",
stack: "总量",
itemStyle: {
barBorderRadius: 15 //将柱状体设置成圆角
},
label: {
show: true,
position: "inside",
fontSize: 10,
lineHeight: 14,
formatter: function(params) {
//这里显示data的数据
return (
"时间：" +
params.data.startTime +
" - " +
params.data.endTime +
"\n" +
params.data.content
);
}
},
data: [
{
id: 1,
value: 7, //这里的value就是开始时间和结束时间的差值,动态数据时需要计算这个值，就是结束时间减去开始时间再转成24等比例的值
startTime: "1:30",
endTime: "8:30",
content: "谁预约了时间"
},
{
id: 2,
value: 2.5, //例如这里的2:15到4:45相差的时间时2:30,value需转化成2.5
startTime: "2:15",
endTime: "4:45",
content: "谁预约了时间"
},
{
id: 3,
value: 3,
startTime: "3:00",
endTime: "6:00",
content: "谁预约了时间"
},
{
id: 4,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 5,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 6,
value: 10,
startTime: "10:00",
endTime: "20:00",
content: "谁预约了时间"
},
{
id: 7,
value: 7,
startTime: "7:00",
endTime: "14:00",
content: "谁预约了时间"
}
]
},
{
name: "已定档",
type: "bar",
stack: "总量",
itemStyle: {
barBorderRadius: 15
},
label: {
show: true,
position: "inside",
fontSize: 10,
lineHeight: 14,
formatter: function(params) {
return (
"时间：" +
params.data.startTime +
" - " +
params.data.endTime +
"\n" +
params.data.content
);
}
},
data: [
{
id: 0,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 1,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 2,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 3,
value: 9,
startTime: "9:00",
endTime: "18:00",
content: "谁预约了时间"
},
{
id: 4,
value: 6,
startTime: "6:00",
endTime: "12:00",
content: "谁预约了时间"
},
{
id: 5,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
},
{
id: 6,
value: "-",
startTime: "-",
endTime: "-",
content: "谁预约了时间"
}
]
}
]
});
if (myChart1._$handlers.click) {
myChart1._$handlers.click.length = 0;
}
myChart1.on("click", params => {
console.log(params);
//可以传参数，用来开发别的需求，例如根据id去做编辑，删除操作
//点击事件
console.log("点击事件");
});
}
}
};
</script>
<style scoped>
</style>
二.柱状图
在package.json添加echarts，保存后运行npm install 或者其他方法添加
"dependencies": {
"echarts": "^4.2.1", //添加echarts
},
在main.js配置
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
在vue页面使用
<template>
<div
id="myChart1"
:style="{width: '95%', height: '100%'}"
style="margin:10px auto;display:block;"
></div> //声明一个id="myChart1"的div ,设宽高
</template>
data(){
return{
xdatas1:[5, 20, 36, 10, 10, 20, 30, 21, 3, 6, 9, 56, 67, 2],
ydatas1: [
"更新天数",
"粉丝量",
"粉丝新增",
"阅读数",
"视频播放量",
"推荐量",
"当天收益",
"微头条数量",
"小视频发布数量"],
max1: 100,
}
},
mounted: function() {
//一开始加载数据，或者是取后台返回来的数据
this.drawLine( this.xdatas1,this.ydatas1,this.max1);
},
methods：{
//柱状图
drawLine(xins1, yins1,max1) {
// 基于准备好的dom，初始化echarts实例
let myChart1 = this.$echarts.init(document.getElementById("myChart1"));
// 绘制图表
var colors = ["#5793f3"];
myChart1.setOption({
title: {
text: "标题关键字",
subtext: "柱状图"
},
color: colors,
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross"
}
},
grid: {
width: "80%"
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ["次数"]
},
xAxis: [
{
type: "value",
name: "次数",
min: 0,
max: max1,
position: "top",
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: "{value}次"
}
}
],
yAxis: [
{
type: "category",
axisLabel: {
interval: 0,
textStyle: {
color: "#5793f3"
}
},
axisTick: {
alignWithLabel: true
},
data: yins1
}
],
series: [
{
name: "次数",
type: "bar",
barWidth: "20%",
data: xins1
}
]
});
}
}
效果图
我的数据将X轴和Y轴互调了
三.词云图
在package.json添加echarts-wordcloud，必须先添加echarts，保存后运行npm install 或者其他方法添加
"dependencies": {
"echarts": "^4.2.1", //添加echarts
"echarts-wordcloud": "^1.1.3",
},
在main.js配置
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 引入echarts字符云
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'
在vue页面使用
<template>
<div
id="worldChart1"
:style="{width: '95%', height: '100%'}"
style="margin:10px auto;display:block;"
></div> //声明一个id="worldChart1"的div ,设宽高
</template>
data(){
return{
worldData1:[],
}
},
mounted: function() {
this.worldData1=[
{
name: "Sam S Club",
value: 10000,
textStyle: { //这里必须用textStyle，词云图才有多颜色，echarts升级版本后词云图不支持了
normal: {
color: "black"
}
}
},
{
name: "Macys",
value: 6181,
textStyle: this.createRandomItemStyle()
},
{
name: "Amy Schumer",
value: 4386,
textStyle: this.createRandomItemStyle()
},
{
name: "Jurassic World",
value: 4055,
textStyle: this.createRandomItemStyle()
},
{
name: "Charter Communications",
value: 2467,
textStyle: this.createRandomItemStyle()
},
{
name: "Chick Fil A",
value: 2244,
textStyle: this.createRandomItemStyle()
},
{
name: "Planet Fitness",
value: 1898,
textStyle: this.createRandomItemStyle()
},
{
name: "Pitch Perfect",
value: 1484,
textStyle: this.createRandomItemStyle()
},
{
name: "Express",
value: 1112,
textStyle: this.createRandomItemStyle()
},
{
name: "Home",
value: 965,
textStyle: this.createRandomItemStyle()
},
{
name: "Johnny Depp",
value: 847,
textStyle: this.createRandomItemStyle()
},
{
name: "Lena Dunham",
value: 582,
textStyle: this.createRandomItemStyle()
},
{
name: "Lewis Hamilton",
value: 555,
textStyle: this.createRandomItemStyle()
}]
//一开始加载数据，或者是取后台返回来的数据
this.drawWorld(this.worldData1);
},
methods：{
createRandomItemStyle() { //随机颜色函数
return {
normal: {
color:
"rgb(" +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(",") +
")"
}
};
},
drawWorld(worldData1) {
// 基于准备好的dom，初始化echarts实例
let worldChart1 = this.$echarts.init(
document.getElementById("worldChart1")
);
worldChart1.setOption({
title: {
text: "标题词符云"
// link: "http://www.google.com/trends/hottrends"
},
tooltip: {
show: true
},
series: [
{
name: "标题词符云",
type: "wordCloud",
size: ["80%", "80%"],
textRotation: [0, 45, 90, -45],
textPadding: 0,
autoSize: {
enable: true,
minSize: 14
},
data: worldData1
}
]
});
}
}
效果图
四.页面上有多个echart图表时 resize 无法自适应
在myChart1.setOption（）后添加如下代码：
window.addEventListener("resize", () => {
myChart1.resize();
});
五.echart 无数据时显示：暂无数据
1.data是接受的数据，如果是数组就写成data.length===0,如果是对象那就写成Object.keys(data).length === 0
title: {
show: Object.keys(data).length === 0,
text: Object.keys(data).length === 0？"暂无数据":“这里写原标题，解决保存为图片时出现标题是‘暂无数据’的问题”,
left: "center",
top: "center"
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: Object.keys(data1).length != 0 } //无数据时，设置不显示保存图片的按钮
}
},
六.vue 使用echart 时报TypeError: Cannot read property ‘getAttribute’ of null 错
造成原因：Echart的图形容器不存在（还没生成或已销毁）就对其进行了初始化造成的
解决办法：先判断一下容器是否存在再执行echart的init方法
//声明的echart容器：
<div id="eChartid" :style="{width: '400px', height: '500px'}" ></div>
//
if (document.getElementById("eChartid")) { //先判断容器存在，eChartid为声明echart的id，只需要加个判断就可以了
let eChartid= this.$echarts.init(
document.getElementById("eChartid")
);
eChartid.setOption({
//这里是设echart的内容
});
}
扫一扫
201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
