文章目录
1.vue引入echars
- 这里使用旧版本,因为新版本会报init初始化实例的错误,导致图标无法显示Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined。
- 终端下载echarts
npm install echarts@4.8.0 --save
3.在main.js中引入
import echarts from "echarts"
Vue.prototype.$echarts = echarts;
2.建立echars基本框架
就是在自己的页面引入官网echarts的代码,先建立一个基本框架如下
<template>
<div class="home"><!--外面这个随意,可加可不加-->
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
export default {
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
let option = {
//这里直接复制官网里面option的代码
};
myChart.setOption(option);
},
},
mounted() {
this.drawChart();
},
};
</script>
上面是一个基本框架,以后建立好框架直接引入即可
3.中国地图
中国地图
<template>
<div class="home">
<div id="main" style="width: 600px; height: 400px"></div>
</div>
</template>
<script>
import 'echarts/map/js/china.js' // 引入中国地图数据
export default {
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
myChart.setOption({ // 进行相关配置
backgroundColor: "#02AFDB",//背景颜色
tooltip: {}, // 鼠标移到图里面的浮动提示框
dataRange: {
show: true,//是否展示左下角图标
min: 0,
max: 1000,
text: ['High', 'Low'],
realtime: true,
calculable: true,
color: ['orangered', 'yellow', 'lightskyblue']//渐变颜色
},
geo: { // 图的配置
map: 'china', // 表示中国地图
roam: true,//是否缩放
label: {
normal: {
show: true, // 是否显示对应地名
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
type: 'map',
coordinateSystem: 'geo' // 对应上方配置
},
{
name: '省市名字', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [{
"name": "北京",
"value": 599
}, {
"name": "上海",
"value": 142
}, {
"name": "黑龙江",
"value": 44
}, {
"name": "深圳",
"value": 92
}, {
"name": "湖北",
"value": 810
}, {
"name": "四川",
"value": 453
}]
}
]
})}
},
mounted() {
this.drawChart();
}}
</script>
效果如下:
4.山西地图为例,展示点击获取城市名称并保存在data中,方便使用
山西地图,可点击获取城市名称
<template>
<div
ref="mapOption"
style="height: 500px; width: 350px; background: rgb(136, 208, 226)"
></div>
</template>
<script>
import "echarts/map/js/province/shanxi.js"; // 引入山西地图
export default {
data() {
return {
city: "",
mapOption: {
tooltip: {//是否展示提示触碰
trigger: "item",
},
legend: {//将会使地图上的圆点显示,不想显示去掉即可
orient: "vertical",
x: "left",
data: ["iphoneX"],
},
dataRange: {//左下角图标的显示
show: true,
min: 0,
max: 2500,
x: "left",
y: "bottom",
text: ["max", "min"],
calculable: false,
},
toolbox: {//是否提供下载,刷新等按钮
show: true,//false则不显示
orient: "vertical",
x: "right",
y: "center",
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true },
},
},
series: [
{
name: "城市名称",
//触碰提示框的文字
type: "map",
x: "center",
showLegendSymbol: true,
mapType: "山西",//可以自定义更改根据引入的地图json变化
roam: false,
itemStyle: {//板块样式
normal: {//设置默认的样式
label: { show: true },
borderColor: "#0fb5b5",
borderWidth: 1,//边框
},
emphasis: {//设置触碰后的样式
show: true,
label: {
show: true,
textStyle: {//设置触碰后的字体样式
fontSize: 14,
fontWeight: "bold",
color: "red",
},
},
},
},
data: [//自定义数据与返回的城市进行匹配
{ name: "太原市", value: 130 },
{ name: "晋中市", value: 140 },
{ name: "吕梁市", value: 50 },
{ name: "临汾市", value: 121 },
{ name: "大同市", value: 155 },
{ name: "方山市", value: 190 },
{ name: "临县市", value: 110 },
{ name: "运城市", value: 170 },
{ name: "离石市", value: 1150 },
{ name: "柳林市", value: 310 },
{ name: "汾阳市", value: 150 },
{ name: "朔州市", value: 150 },
{ name: "忻州市", value: 150 },
{ name: "阳泉市", value: 150 },
{ name: "长治市", value: 150 },
{ name: "晋城市", value: 150 },
],
},
],
},
};
},
mounted() {//调用methods方法
this.mapEchartsInit();
},
methods: {
mapEchartsInit() {
this.$echarts.init(this.$refs.mapOption).setOption(this.mapOption);//得到dom元素
var _this = this;//定义this,解决this指向问题
this.$echarts.init(this.$refs.mapOption).on("click", function (params) {
_this.city = params.name;//将点击的city名传给data中的city接收,便于与后端数据匹配使用
console.log(_this.city);//这里打印一下得到的城市名称
});
},
},
};
</script>
<style scoped>
</style>
效果图如下:
6.图表面积图(大小,线条颜色,面积颜色,百分比显示,横坐标间隔显示)
<template>
<div id="main" style="width: 100%; height: 100%"></div>
</template>
<script>
export default {
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
let option = {
grid:{//设置图表与大边框的距离,可以用于放大图表,属性解释在最下方
x:50,//左上角x方向的距离
y:20,
x2:20,//右下角y方向的距离
y2:20,
borderWidth:10
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["11:00", "", "11:15", "", "11:30", "", "11:45", "", "", ""],//x轴数据
axisLabel: {
interval: 1, //加入axisLabel字段,interval后面加你想要间隔的个数
},
},
yAxis: [
{
type: "value",
axisLabel: {//纵轴用百分比显示
show: true,
interval: "auto",
formatter: "{value} %",
},
show: true,
},
],
series: [
{
data: [90, 90, 80, 80, 80, 80, 80, 80, 80, 80],//value值
type: "line",
showSymbol: false,
areaStyle: {
opacity: 0.3,//设置背景颜色不透明度
color: {
colorStops: [//渐变色,我这里用的同一种颜色,可以改
{
offset: 0,
color: "green", // 0% 处的颜色
},
{
offset: 1,
color: "green", // 100% 处的颜色
},
],
},
},
itemStyle: {
normal: {
// 修改数据边界的线颜色
lineStyle: {
color: "rgba(56, 191, 96, 0.5)", //改变折线颜色
},
},
},
},
],
};
myChart.setOption(option);
},
},
mounted() {
this.drawChart();
},
};
</script>
<style lang="scss" scoped>
</style>
效果图如下
到这里结束,然后补充一些属性
针对div宽高100%,图表却很小的情况解决如下=>
1.改变图表大小,分别图表与最大边框左上角x,y的距离,以及与最大边框右下角的x2,y2距离,分别调整起图表大小
grid:{
x:50,
y:20,
x2:20,
y2:20,
borderWidth:10
},