echarts基本使用和封装
使用setOptions设置配置项时最好设置第二个参数为true
需求：点击按钮只是更新某个series的数据
下面产生的问题：某个series的数据是更新了，但是还保留着其他series的数据，这是echarts做了性能优化
参考文档：https://echarts.apache.org/zh/api.html#echartsInstance.setOption
<template>
<div class="test">
<button @click="changeEchartsOption">修改echart配置</button>
<div class="demo" ref="chartRef"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
data() {
return {
chartInstance: null,
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.chartInstance = echarts.init(this.$refs.chartRef);
const options = {
title: {
text: "Stacked Line",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
name: "Email",
type: "line",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "Union Ads",
type: "line",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "Video Ads",
type: "line",
data: [150, 232, 201, 154, 190, 330, 410],
},
],
};
this.chartInstance.setOption(options);
},
changeEchartsOption() {
// 如果setOption的不设置第二个参数或者设置为false的话，echart会和之前的配置进行合并
// 下面我只想设置series的第一个对象，但是series中的第二个和第三个对象保留在页面上了
this.chartInstance.setOption({
series: [
{ data: [100, 30, 90, 7, 5, 8, 66] },
],
});
},
},
};
</script>
<style scoped>
.demo {
width: 500px;
height: 300px;
}
</style>
echarts组件的封装
效果图
具体代码
App.vue
<template>
<div class="app">
<!-- 图表组件的封装 -->
<!-- <bar-chart :chart-data="chartData" /> -->
</div>
</template>
<script>
import BarChart from "./views/bar-chart.vue";
export default {
components: {
BarChart,
},
data() {
return {
chartData: {},
};
},
created() {
setTimeout(() => {
this.fetchChartData();
}, 1000);
},
methods: {
fetchChartData() {
this.$nextTick(() => {
this.chartData = {
value1: 99,
value2: 150,
value3: 100,
};
});
},
},
};
</script>
<style scoped></style>
bar-chart.vue
<template>
<div class="bar-chart" ref="barChartRef">bar-chart</div>
</template>
<script>
import * as echarts from "echarts";
import getBarOptions from "./barOptions";
export default {
props: {
chartData: {
type: Object,
},
},
data() {
return {
chartInstance: null,
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
this.chartInstance = echarts.init(this.$refs.barChartRef);
window.addEventListener("resize", () => {
this.chartInstance.resize();
});
},
},
watch: {
chartData(newData) {
// 监听传入的echart配置发生变化时重新执行echart的绘制
const options = getBarOptions(newData);
// setOptions第二个参数表示是否和之前设置的options进行合并。值为true时表示删除所有组件，然后根据新的options创建组件
this.chartInstance.setOption(options, true);
},
},
};
</script>
<style scoped>
.bar-chart {
width: 500px;
height: 500px;
}
</style>
barOptions.js
// 通过返回函数的形式设置变化的配置项
// 为啥不用对象的形式，因为echart的setOptions默认是对新的配置项进行合并，但是有的时候
export default function getBarOptions(config) {
const { value1, value2, value3 } = config;
const barOptions = {
backgroundColor: "#0e202d",
title: {
text: "第三采油厂",
subtext: "总数: 599",
textStyle: {
color: "#fff",
fontSize: 20,
},
subtextStyle: {
color: "#999",
fontSize: 16,
},
x: "center",
top: "0%",
},
grid: {
top: 200,
bottom: 150,
},
tooltip: {},
xAxis: {
data: ["关井数", "开井数", "不在线"],
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
interval: 0,
textStyle: {
color: "#beceff",
fontSize: 20,
},
margin: 80, //刻度标签与轴线之间的距离。
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [100, 45],
symbolOffset: [0, -20],
z: 12,
data: [
{
name: "关井数",
// value: "981",
value: value1,
trueVal: "98",
symbolPosition: "end",
itemStyle: {
normal: {
color: "#00fff5", //圆柱顶部颜色
},
},
},
{
name: "开井数",
// value: "1000",
value: value2,
trueVal: "100",
symbolPosition: "end",
itemStyle: {
normal: {
color: "#ffcc00", //圆柱顶部颜色
},
},
},
{
name: "不在线",
// value: "900",
value: value3,
trueVal: "90",
symbolPosition: "end",
itemStyle: {
normal: {
color: "#b9b7ff", //圆柱顶部颜色
},
},
},
],
},
{
name: "",
type: "pictorialBar",
symbolSize: [100, 45],
symbolOffset: [0, 24],
z: 12,
data: [
{
name: "关井数",
// value: "981",
value: value1,
trueVal: "98",
itemStyle: {
normal: {
color: "#43bafe", //圆柱底部颜色
},
},
},
{
name: "开井数",
// value: "1000",
value: value2,
trueVal: "100",
itemStyle: {
normal: {
color: "#ff7800", //圆柱底部颜色
},
},
},
{
name: "不在线",
// value: "900",
value: value3,
trueVal: "90",
itemStyle: {
normal: {
color: "#e9a5ff", //圆柱底部颜色
},
},
},
],
},
{
name: "",
type: "pictorialBar",
symbolSize: [150, 75],
symbolOffset: [0, 44],
z: 11,
data: [
{
name: "关井数",
// value: "981",
value: value1,
trueVal: "98",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#43bafe", //底部内圆圈颜色
borderWidth: 2,
},
},
},
{
name: "开井数",
// value: "1000",
value: value2,
trueVal: "100",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#ff7800", //底部内圆圈颜色
borderWidth: 2,
},
},
},
{
name: "不在线",
// value: "900",
value: value3,
trueVal: "90",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#e9a5ff", //底部内圆圈颜色
borderWidth: 2,
},
},
},
],
},
{
name: "",
type: "pictorialBar",
symbolSize: [200, 100],
symbolOffset: [0, 62],
z: 10,
data: [
{
name: "关井数",
// value: "981",
value: value1,
trueVal: "98",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#43bafe", //底部外圆圈颜色
borderType: "dashed",
borderWidth: 2,
},
},
},
{
name: "开井数",
// value: "1000",
value: value2,
trueVal: "100",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#ff7800", //底部外圆圈颜色
borderType: "dashed",
borderWidth: 2,
},
},
},
{
name: "不在线",
// value: "900",
value: value3,
trueVal: "90",
itemStyle: {
normal: {
color: "transparent",
borderColor: "#e9a5ff", //底部外圆圈颜色
borderType: "dashed",
borderWidth: 2,
},
},
},
],
},
{
type: "bar",
silent: true,
barWidth: 100,
barGap: "-100%",
data: [
{
name: "关井数",
// value: "981",
value: value1,
trueVal: "98",
label: {
normal: {
show: true,
position: "top",
distance: 40,
textStyle: {
color: "#00fff5", //柱子对应数值颜色
fontSize: 40,
},
},
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(0,255,245,0.5)",
},
{
offset: 1,
color: "#43bafe", //底部渐变颜色
},
],
},
},
},
},
{
name: "开井数",
// value: "1000",
value: value2,
trueVal: "100",
label: {
normal: {
show: true,
position: "top",
distance: 40,
textStyle: {
color: "#ffcc00", //柱子对应数值颜色
fontSize: 40,
},
},
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(255,204,0,0.5)",
},
{
offset: 1,
color: "#ff7800", //底部渐变颜色
},
],
},
},
},
},
{
name: "不在线",
// value: "900",
value: value3,
trueVal: "90",
label: {
normal: {
show: true,
position: "top",
distance: 40,
textStyle: {
color: "#b9b7ff", //柱子对应数值颜色
fontSize: 40,
},
},
},
itemStyle: {
normal: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "rgba(185,183,255,0.5)",
},
{
offset: 1,
color: "#e9a5ff", //底部渐变颜色
},
],
},
},
},
},
],
},
],
};
return barOptions;
}
