echarts的第一次封装
<template>
<div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import tdTheme from "./theme.json"; // 引入默认主题
import resizeMixins from "@/utils/resizeMixins";
export default {
name: "echart",
mixins: [resizeMixins],
props: {
className: {
type: String,
default: "chart",
},
id: {
type: String,
// default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "2.5rem",
},
options: {
type: Object,
default: () => ({}),
},
},
data() {
return {
chart: null,
};
},
watch: {
options: {
handler(options) {
// 设置true清空echart缓存
this.chart.setOption(options, true);
},
deep: true,
},
},
mounted() {
this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
this.initChart();
},
// created() {
// this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
// this.initChart();
// },
beforeDestroy(){
// 离开页面
console.log('离开页面')
this.chart.clear()
if (this.chart != null) {
this.chart.dispose()
}
},
methods: {
initChart() {
// 初始化echart
this.chart = this.$echarts.init(this.$el, "tdTheme");
// this.chart.clear()
this.chart.setOption(this.options, true);
// 设置自适应屏幕大小
let that = this;
window.addEventListener("resize", function () {
that.chart.resize();
});
// window.onresize = function () {
// myChart.resize();
// that.chart.resize();
// };
},
},
};
</script>
<style></style>
echarts的二次封装
【二次封装】：包含通用的配置，不会改变的配置
使用场景：比如，页面上的柱状图，样式相同，但是文字颜色，数据，标题等不同，所以二次封装的echarts作用就是通用配置，灵活配置从获取数据的页面上获取
把series , x,y轴上的数据抽离
<template>
<div>
<!-- 基础配置 -->
<Echart
:options="options"
:id="chartid"
height="180px"
width="100%"
></Echart>
</div>
</template>
<script>
import Echart from "@/common/echarts/index.vue";
import _ from 'lodash'
export default {
name: "MyappLastchart",
components: {
Echart,
},
props: {
chartid:{
type:String,
default:''
},
cdata: {
type: Object,
// type: Array,
default: () => ({}),
},
},
data() {
return {
options: {},
};
},
mounted() {},
methods: {},
watch: {
cdata: {
handler(val) {
console.log(999,val)
var min = 50;
this.options = {
backgroundColor: "#111c4e",
color: ["#3398DB"],
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
opacity: 0,
},
},
// formatter: function (prams) {
// if (prams[0].data === min) {
// return "合格率：0%";
// } else {
// return "合格率：" + prams[0].data + "%";
// }
// },
},
legend: {
data: ["直接访问", "背景"],
show: false,
},
grid: {
left: "0%",
right: "0%",
bottom: "5%",
top: "7%",
height: "85%",
containLabel: true,
z: 22,
},
xAxis: [
{
type: "category",
gridIndex: 0,
// data: xData,
axisTick: {
alignWithLabel: true,
},
axisLine: {
lineStyle: {
color: "#0c3b71",
},
},
axisLabel: {
show: true,
color: "rgb(170,170,170)",
fontSize: 16,
},
},
],
yAxis: [
{
type: "value",
gridIndex: 0,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
min: min,
max: 100,
axisLine: {
lineStyle: {
color: "#0c3b71",
},
},
axisLabel: {
color: "rgb(170,170,170)",
formatter: "{value} %",
},
},
{
type: "value",
gridIndex: 0,
min: min,
max: 100,
splitNumber: 12,
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
},
},
},
],
series: [
{
name: "合格率",
type: "bar",
barWidth: "30%",
xAxisIndex: 0,
yAxisIndex: 0,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#00feff",
},
{
offset: 0.5,
color: "#027eff",
},
{
offset: 1,
color: "#0286ff",
},
]),
},
},
// data: yData,
zlevel: 11,
},
{
name: "背景",
type: "bar",
barWidth: "50%",
xAxisIndex: 0,
yAxisIndex: 1,
barGap: "-135%",
data: [100, 100, 100, 100, 100, 100, 100],
itemStyle: {
normal: {
color: "rgba(255,255,255,0.1)",
},
},
zlevel: 9,
},
],
};
this.options = _.merge(this.options,val)
},
deep: true,
immediate: true,
},
},
};
</script>
<style lang="scss" scoped></style>
上述代码 要注意 获取数据的页面的灵活配置和通用配置的合并使用的是lodash的merge方法
【merge】：相同属性会覆盖，不同属性会合并；
获取数据的页面上获取灵活配置
<Lastchart :cdata="options" :id="chartid" />
getdata() {
var data = [
{
name: "一月",
value: 80,
},
{
name: "二月",
value: 87.8,
},
{
name: "三月",
value: 71,
},
{
name: "四月",
value: 80,
},
{
name: "五月",
value: 66,
},
{
name: "六月",
value: 80,
},
{
name: "七月",
value: 80,
},
];
var xData = [],
yData = [];
data.map(function (a, b) {
xData.push(a.name);
if (a.value === 0) {
yData.push(a.value + min);
} else {
yData.push(a.value);
}
});
this.options = {
xAxis: [
{
data: xData,
},
],
yAxis: [{}, {}],
series: [
{
data: yData,
},
{},
],
};
},