前言
在vue中使用echart,不用监听窗口自适应。节省代码量。
参考路径 https://github.com/ecomfe/vue-echarts
1.安装依赖
本项目使用的是vue2,根据提示安装。
注意:echarts 安装最新版
1.npm install echarts vue-echarts
要求 echarts 版本5以上
2.npm i -D @vue/composition-api@1.1.4
或着先安装composition-api然后package.json更改版本号;最后npm i
2.使用
<template>
<div class="container-box">
<div class="layout-left">
<div class="layout-top">
<v-chart class="chart" :option="option1" autoresize />
</div>
<div class="layout-bottom">
<v-chart class="chart" :option="option2" autoresize />
</div>
</div>
<div class="layout-right">
<div class="layout-top"></div>
<div class="layout-bottom"></div>
</div>
</div>
</template>
<script>
// echarts插件
import ECharts from "vue-echarts";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart, PieChart } from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from "echarts/components";
use([
CanvasRenderer,
PieChart,
TitleComponent,
TooltipComponent,
LegendComponent,
]);
export default {
data() {
return {
option1: {},
option2: {},
option3: {},
option4: {},
};
},
components: {
"v-chart": ECharts,
},
created() {
this.pieDome1();
this.pieDome2();
},
methods: {
pieDome1() {
this.option1 = {
title: {
text: "会员数据统计",
subtext: "动态数据",
x: "center",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
show: true,
orient: "vertical",
left: "left",
data: ["微信访问", "公众号访问", "扫码进入", "分享进入", "搜索访问"],
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{ value: 335, name: "微信访问" },
{ value: 310, name: "公众号访问" },
{ value: 234, name: "扫码进入" },
{ value: 135, name: "分享进入" },
{ value: 1548, name: "搜索访问" },
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
},
// 饼图文字有小圆点
pieDome2() {
this.option2 = {
backgroundColor: "transparent",
color: ["#cd4692", "#9658c3", "#6c6be2", "#01aebf", "#18b794"],
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c}$ ({d}%)",
textStyle: {
fontSize: 16,
},
},
legend: {
data: ["A", "B", "C", "D", "E"],
orient: "vertical",
right: "5%",
top: "13%",
itemWidth: 8,
itemHeight: 8,
itemGap: 30,
textStyle: {
color: "#",
fontSize: 16,
},
},
series: [
{
name: "TITLE",
type: "pie",
clockwise: false,
startAngle: 90,
radius: "75%",
center: ["44%", "50%"],
hoverAnimation: false,
roseType: "radius", //area
data: [
{
value: 335,
name: "A",
},
{
value: 310,
name: "B",
},
{
value: 234,
name: "C",
},
{
value: 135,
name: "D",
},
{
value: 148,
name: "E",
},
],
itemStyle: {
// 鼠标移入加上阴影有3D感
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
// 扇形间隔
normal: {
borderColor: "#273454",
borderWidth: "5",
},
},
label: {
show: true,
position: "outer",
alignTo: "labelLine",
// ·圆点
backgroundColor: "auto", //圆点颜色,auto:映射的系列色
height: 0,
width: 0,
lineHeight: 0,
// height,width.lineHeight必须为0
distanceToLabelLine: 0, //圆点到labelline距离
borderRadius: 5,
padding: [5, -5, 5, -5],
/*radius和padding为圆点大小,圆点半径为几radius和padding各项数值就为几如:圆点半径为1*/
// a是 title b是name c是value d是百分比
formatter: "{a|{b}}{b|{d}}{c|%}",
rich: {
a: {
padding: [0, 5, 0, 15],
},
b: {
color: "#333",
padding: [0, 0, 0, 0],
},
c: {
color: "#333",
padding: [0, 12, 0, 0],
},
},
},
labelLine: {
normal: {
length: 20,
length2: 30,
lineStyle: {
width: 1,
},
},
},
},
],
};
},
},
};
</script>
<style lang="less" scoped>
@import "../../../styles/common.less";
</style>
3.展示效果
4.
如果有渐变需要把new echarts.graphic.LinearGradient替换成this.$echarts.graphic.LinearGradient
在main.js中设置
// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts