因为是在vue中使用的,所以需要现在main.js中引入并注册
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
这些属性是在官网看配置项外加看视频,然后一点一点去整理的。
可能不多,不过基本够用了。
let myChart1 = this.$echarts.init(document.getElementById("box"));
myChart1.setOption({
title: {
text: "某地区蒸发量和降水量",
// 副标题
subtext: "纯属虚构",
// 水平方向位置
left: "center"
// title背景颜色
// backgroundColor:"#000000"
// 字体样式
/* textStyle:{
color:"#ffffff"
}, */
// 副标题样式
/* subtextStyle:{
color:"green"
} */
},
tooltip: {
// 可选值,如果是item的话只有鼠标移动到柱状图上才会有提示,如果是axis的话移动到当前刻度就会有提示
trigger: "axis"
},
legend: {
data: ["蒸发量", "降水量"],
left: "left"
},
// 右侧的切换模块 可以切换展示方式
toolbox: {
show: true,
// 工具箱排列方式 默认horizontal 可选vertical
orient: "horizontal",
// 工具箱字体大小 默认15
itemSize: 16,
// 每项之间的间隔
itemGap: 10,
// 在鼠标悬浮是是否显示标题 默认true
showTitle: true,
feature: {
// 直接以表格形式展示数据
dataView: {
lang: ["数据视图", "关闭", "刷新"],
show: true,
// 是否只读
readOnly: false,
// 文本颜色
textColor: "",
// 按钮颜色
buttonColor: "",
// 按钮文本颜色
buttonTextColor: "",
iconStyle: {
// 边框颜色
borderColor: "red",
// 边框宽度
borderWidth: 0,
// 边框类型
borderType: "solid",
// 文字相关配置
emphasis: {
iconStyle: {
// 文本位置
textPosition: "left",
// 文本颜色
textFill: "red",
// 文本对齐方式
textAlign: "center",
// 文本区域背景填充色
textBackgroundColor: "",
// 文本区域圆角大小
textBorderRadius: 5,
// 文本区域内边距
textPadding: 0
}
}
}
},
// 区域缩放和区域缩放还原
dataZoom: {
show: true,
// 可选项,默认就是这些内容
title: {
dataZoom: "区域缩放",
dataZoomReset: "区域缩放还原"
}
},
// 显示位置
// left:
magicType: {
show: true,
// 动态切换类型 可选值 'line', 'bar', 'stack', 'tiled'
type: ["line", "bar"]
},
// 还原
restore: {
show: true,
iconStyle: {
// 整体图标颜色
// color:"red",
// 边框颜色
borderColor: "blue"
}
},
// 保存为图片
saveAsImage: {
show: true,
// 保存图片类型 默认png
type: "png",
// 保存图片名称 默认使用 title.text
name: "",
// 保存图片背景 默认白色
backgroundColor: "auto",
// 保存图片忽略的组件列表 默认工具栏
excludeComponents: "toolbox"
}
}
},
// 是否可拖拽 饼图用的比较多
// calculable: true,
// 数据区域缩放
dataZoom: {
show: true,
// 缩放变化是否实时显示
realTime: true,
// 起始位置
start: 0,
// 结束位置
end: 100
},
xAxis: [
{
// 图表两边是否留白
// boundaryGap: false,
// 坐标轴类型 可选value category time log
type: "category",
// 坐标轴名称
name: "事件线",
// 坐标轴数据
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月"
]
}
],
yAxis: [
{
type: "value"
}
],
series: [
{
name: "蒸发量",
// 图表类型
type: "bar",
// 可视化数据
data: [
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3
],
markPoint: {
data: [
// 所有数据的最大最小值
{ type: "max", name: "最大值" },
{ type: "min", name: "最小值" }
]
},
markLine: {
data: [
// 平均值
{ type: "average", name: "平均值" }
]
}
},
{
name: "降水量",
type: "bar",
data: [
2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6.0,
2.3
],
markPoint: {
data: [
{ name: "年最高", value: 182.2, xAxis: 7, yAxis: 183 },
{ name: "年最低", value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [{ type: "average", name: "平均值" }]
}
}
]
});
}