|
这个案例是结合Vue的2.6+版本和echarts的5.4版本来结合使用的。
一、安装方式
从 npm 获取
npm install echarts --save
引入（现在的版本就是通过这种方式引入）
import * as echarts from ‘echarts’;
二、上图片
三、代码
import * as echarts from "echarts";
export default {
props: {
className: {
type: String,
default: "chart6",
},
id: {
type: String,
default: "chart6",
},
width: {
type: String,
default: "300px",
},
height: {
type: String,
default: "300px",
},
},
data() {
return {
chart: null,
dataList: [],
mTime: null,
index: -1,
option: null,
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
window.addEventListener("resize", () => {
this.chart.resize();
});
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById(this.id));
this.dataList = [
30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60,
20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
];
this.mapActive();
this.mouseEvents();
this.option = {
// 提示框组件。
tooltip: {
// 触发类型。
// 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
// 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
trigger: "axis",
},
// 图例组件。
legend: {
top: "5%", // 图例组件离容器上侧的距离。 top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
right: "5%", // 同上
data: ["人均住房面积", "保障面积标准"], // 图例的数据数组。
// 图例的公用文本样式。
textStyle: {
color: "rgba(255,255,255,.5)",
fontSize: "12",
},
},
// 直角坐标系内绘图网格
grid: {
left: "0", // grid 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
top: "20", // 同上
right: "3%", // 同上
bottom: "10", // 同上
// grid 区域是否包含坐标轴的刻度标签。
// containLabel 为 true 的时候：
// grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
// 这常用于『防止标签溢出』的场景，标签溢出指的是，标签长度动态变化时，可能会溢出容器或者覆盖其他组件。
containLabel: true,
},
// 直角坐标系 grid 中的 x 轴，
xAxis: [
{
// 1. 'value' 数值轴，适用于连续数据。
// 2. 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
// 3. 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 4. 'log' 对数轴。适用于对数数据。
type: "category", // 坐标轴类型。
boundaryGap: false, // 坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
nameRotate: 30, // 坐标轴名字旋转，角度值。
// x轴更换数据
data: [
"越秀区",
"海珠区",
"荔湾区",
"天河区",
"白云区",
"番禺区",
"南沙区",
"从化区",
"增城区",
"花都区",
"黄埔区",
],
// 文本颜色为rgba(255,255,255,.6) 文字大小为 12
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
interval: 0, //代表显示所有x轴标签显示
rotate: 40, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
},
// x轴线的颜色为 rgba(255,255,255,.2)
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.2)",
},
},
},
{
interval: 2, // 强制设置坐标轴分割间隔。
},
],
// 直角坐标系 grid 中的 y 轴
yAxis: [
{
// 'value' 数值轴，适用于连续数据。
// 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
// 'log' 对数轴。适用于对数数据。
type: "value", // 坐标轴类型。
// 坐标轴刻度相关设置。
axisTick: {
show: true // 是否显示坐标轴刻度。
},
// 坐标轴轴线相关设置。
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
// 坐标轴刻度标签的相关设置。
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
fontSize: 12,
},
},
// 修改分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
{
type: "value",
axisTick: {
show: true,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(207, 227, 252, 1)t",
},
// symbol: ["none", "arrow"],
// symbolSize: [5, 12],
// symbolOffset: [0, 10],
},
// min: 0,
// max: 100,
splitLine: {
show: false,
lineStyle: {
color: "rgba(39, 57, 75, 1)",
width: 1,
type: "solid",
},
},
},
],
series: [
{
name: "房源",
type: "line",
smooth: true,
// 单独修改当前线条的样式
lineStyle: {
color: "#0184d5",
width: "2",
},
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(243, 148, 148, 0.7)", // 渐变色的起始颜色
},
{
offset: 0.8,
color: "rgba(243, 148, 148, 0.2)", // 渐变线的结束颜色
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 5,
// 设置拐点颜色以及边框
// 开始不显示拐点， 鼠标经过显示
showSymbol: true,
// 设置拐点颜色以及边框
itemStyle: {
color: "#0184d5",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 15,
},
data: [
30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40,
30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40,
],
},
{
name: "保障人群",
type: "line",
smooth: true,
lineStyle: {
normal: {
color: "#00d887",
width: 2,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0, 216, 135, 0.4)",
},
{
offset: 0.8,
color: "rgba(0, 216, 135, 0.1)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
},
},
// 设置拐点 小圆点
symbol: "circle",
// 拐点大小
symbolSize: 5,
// 设置拐点颜色以及边框
itemStyle: {
color: "#00d887",
borderColor: "rgba(221, 220, 107, .1)",
borderWidth: 15,
},
// 开始不显示拐点， 鼠标经过显示
showSymbol: true,
data: this.dataList,
},
],
};
this.option && this.chart.setOption(this.option);
},
mapActive() {
const dataLength = this.dataList.length;
// 用定时器控制高亮
this.mTime = setInterval(() => {
// 清除之前的高亮
this.chart &&
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: this.index,
});
this.index++;
// 当前下标高亮
this.chart &&
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: this.index,
});
this.chart &&
this.chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.index,
});
if (this.index > dataLength) {
this.index = 0;
}
}, 2000);
},
mouseEvents() {
// 鼠标划入
this.chart &&
this.chart.on("mouseover", () => {
// 停止定时器，清除之前的高亮
clearInterval(this.mTime);
this.mTime = "";
this.chart &&
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: this.index,
});
});
// 鼠标划出重新定时器开始
this.chart &&
this.chart.on("mouseout", () => {
this.mapActive();
});
},
},
};
#MixCharts {
width: 100%;
height: 100%;
}
封装两个方法，然后放到echarts的配置里面，如果要改变滚动的数据，可以去改 tooltip（提示框组件）这个配置。
|