本篇讲解最简单的echarts实现方法,具体见代码,并标注注释(例子 文档事例都是有的,传送门?)
<template>
<div>
<div id="main" style="width:1200px;height:600px;"></div>
</div>
</template>
<script>
import echarts from "echarts";
export default {
name: "echartssimple",
data() {
return {
list: [
{
x: 1,
y: 1
},
{
x: 2,
y: 2
},
{
x: 3,
y: 3
},
{
x: 4,
y: 4
},
{
x: 5,
y: 1
},
{
x: 6,
y: 0
},
{
x: 7,
y: 10
}
],
dataX: [],
dataY: []
};
},
methods: {
init() {
this.myChart = echarts.init(document.getElementById("main"));
let option = {
legend: {
icon: "stack",
data: ["AA"]
},
tooltip: {
trigger: "axis",
axisPointer: {
animation: true
}
},
// 工具栏
toolbox: {
x: 1100,
y: 0,
feature: {
saveAsImage: {
name: `test` // 下载图片
}
}
},
grid: {
left: "5%", //组件距离容器左边的距离
right: "20%",
top: "15%"
},
// X轴 滑块 可缩放
dataZoom: [
{
type: "slider",
show: true,
start: 0, // 开始百分数
end: 100 // 结束百分数
}
],
xAxis: {
type: "category",
splitLine: {
// X 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
},
data: this.dataX
},
yAxis: [
{
name: "Y轴单位写的位置",
type: "value",
// max: 100,
// min: 0,
splitNumber: 10, // Y 轴分隔格数
splitLine: {
// Y 轴分隔线样式
show: true,
lineStyle: {
color: ["#f3f0f0"],
width: 2,
type: "solid"
}
}
}
],
series: this.dataY
};
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
}
},
mounted() {
this.$nextTick(() => {
this.dataX = this.list.map(item => item.x);
this.dataY.push({
name: "AA",
type: "line",
data: this.list.map(item => item.y)
});
this.init(this.dataX, this.dataY);
});
}
};
</script>
<style scoped>
</style>