项目中是用echarts 一定要下载它，命令 ：
npm install echarts -S
注意如果版本太高有问题，可以下载低版本的 4.8.0
然后需要全局引入，在main.js中
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
OK了，我们可以使用它了。
我们在view文件夹李专门去写这样的效果，或者在component文件夹李去写封装的组件echarts.
首先在App.vue 文件中编辑代码
<template>
<div id="app">
<a @click="current = 'L'">
<button> 列表 </button>
</a>
=====
<a @click="current = 'M' ">
<button> 模板 </button>
</a>
<keep-alive>
<component :is="current"></component>
</keep-alive>
<!-- 这里是刚大好环境自动配置的模板，我不喜欢就自己写了动态模板
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/> -->
</div>
</template>
<script>
import L from './components/List.vue'
import M from './components/Modal.vue'
export default {
name: "App",
components: {
L,
M
},
data() {
return {
current: 'L'
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
效果吗就是下边大图所示，默认是L也就是柱状图和饼状图。
List.vue 代码的简单书写，就不过多的详细说明了，可以直接去看echarts官网。
<template>
<div>
<!-- 沉淀图 -->
<div
id="myChart"
:style="{ width: '100%', height: '300px', top: '30px' }"
></div>
<div id="incDiv">
<!-- 商品图 -->
<div
id="Chart1"
:style="{
width: '40%',
height: '300px',
top: '30px',
}"
></div>
<!-- 天气图 -->
<div
id="Chart2"
:style="{
width: '40%',
height: '300px',
top: '30px',
}"
></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
mounted() {
this.deawLine();
this.cake();
this.weather();
},
methods: {
deawLine() {
let myChart = this.$echarts.init(document.getElementById("myChart"));
myChart.setOption({
// title: { text: "测试练习echarts" },
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
crossStyle: {
color: "#999",
},
},
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
restore: { show: true },
saveAsImage: { show: true },
},
},
legend: {
data: ["蒸发量", "沉淀", "温度"],
},
xAxis: [
{
type: "category",
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周天"],
axisPointer: {
type: "shadow",
},
},
],
yAxis: [
{
type: "value",
name: "沉淀",
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: "{value} ml",
},
},
{
type: "value",
name: "温度",
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: "{value} °C",
},
},
],
series: [
{
name: "蒸发量",
type: "bar",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
3.3,
],
},
{
name: "沉淀",
type: "bar",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
2.3,
],
},
{
name: "温度",
type: "line",
yAxisIndex: 1,
data: [
2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
],
},
],
});
},
cake() {
var Chart1 = this.$echarts.init(document.getElementById("Chart1"));
Chart1.setOption({
tooltip: {
trigger: "item",
},
legend: { // 图例 控制头部展示选中的数据
top: "5%",
left: "center",
},
series: [
{
name: "来自数据库",
type: "pie",
radius: ["30%", "50%"],
avoidLabelOverlap: false,
label: {
show: false,
position: "center",
},
emphasis: { // 控制中心数据的展示
label: {
show: true,
fontSize: "16",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "商品" },
{ value: 735, name: "指导" },
{ value: 580, name: "邮箱" },
{ value: 484, name: "联合" },
{ value: 300, name: "视频" },
],
},
],
});
},
weather() {
var Chart2 = this.$echarts.init(document.getElementById("Chart2"));
var ROOT_PATH =
"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
const weatherIcons = {
Sunny: ROOT_PATH + "/data/asset/img/weather/sunny_128.png",
Cloudy: ROOT_PATH + "/data/asset/img/weather/cloudy_128.png",
Showers: ROOT_PATH + "/data/asset/img/weather/showers_128.png",
};
Chart2.setOption({
title: {
text: "天气统计",
subtext: "潜台词",
left: "left",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
bottom: 10,
left: "center",
data: ["CityA", "CityB", "CityD", "CityC", "CityE"],
},
series: [
{
type: "pie",
radius: "55%",
center: ["35%", "50%"],
selectedMode: "single",
data: [
{
value: 1548,
name: "CityE",
label: {
formatter: [
"{title|{b}}{abg|}",
" {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}",
"{hr|}",
" {Sunny|}{value|202}{rate|55.3%}",
" {Cloudy|}{value|142}{rate|38.9%}",
" {Showers|}{value|21}{rate|5.8%}",
].join("\n"),
backgroundColor: "#eee",
borderColor: "#777",
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: "#eee",
align: "center",
},
abg: {
backgroundColor: "#333",
width: "100%",
align: "right",
height: 25,
borderRadius: [4, 4, 0, 0],
},
Sunny: {
height: 30,
align: "left",
backgroundColor: {
image: weatherIcons.Sunny,
},
},
Cloudy: {
height: 30,
align: "left",
backgroundColor: {
image: weatherIcons.Cloudy,
},
},
Showers: {
height: 30,
align: "left",
backgroundColor: {
image: weatherIcons.Showers,
},
},
weatherHead: {
color: "#333",
height: 24,
align: "left",
},
hr: {
borderColor: "#777",
width: "100%",
borderWidth: 0.5,
height: 0,
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: "left",
},
valueHead: {
color: "#333",
width: 20,
padding: [0, 20, 0, 30],
align: "center",
},
rate: {
width: 40,
align: "right",
padding: [0, 10, 0, 0],
},
rateHead: {
color: "#333",
width: 40,
align: "center",
padding: [0, 10, 0, 0],
},
},
},
},
{ value: 735, name: "CityC" },
{ value: 510, name: "CityD" },
{ value: 434, name: "CityB" },
{ value: 335, name: "CityA" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
});
},
},
};
</script>
<style scoped>
#incDiv {
display: flex;
justify-content: space-around;
/* justify-content: space-between; */
}
</style>
列表模板：
模板模板
Modal.vue
<template>
<div class="fieldbusinessOverview">
<!-- 这个是搜索框，没有展示，可以直接去掉
<nav-form
ref="navForm"
:data="navFormInfo.data"
:field-list="navFormInfo.fieldList"
/> -->
<div class="top">
<span class="device-timeStr">当前上报时间：{{ timeStr || "---" }}</span>
</div>
<div class="content_top">
<div class="cardbox" v-for="(itemdiv, index) in divListData" :key="index">
<div class="cardbox-title">{{ itemdiv.probability }}</div>
<div class="cartop">
<div class="facilitySort">
<echartsModelOne :series-arr-one="itemdiv.arrListOne" />
</div>
<div class="facilitySort">
<echartsModelTwo :series-arr-two="itemdiv.arrListTwo" />
</div>
</div>
<div class="cardboxSpan">
<div>{{ itemdiv.care }}</div>
<div>{{ itemdiv.fatten }}</div>
</div>
</div>
</div>
<div class="tabs">
<span
v-for="(itemspan, index) in itemspanList"
:key="index"
class="tabs-item"
:class="itemspan.stactive === stactive ? 'tabs-item-active' : ''"
@click="itemClick(itemspan.stactive)"
>{{ itemspan.itemname }}
</span>
</div>
<div class="dabiaoge">
<div v-for="(item, index) in deviceListInfos" :key="index" class="biaoge">
<div class="danyuan">
<div>{{ item.byname }}</div>
<img
v-if="item.statusOnline === 1"
style="
width: 14px;
height: 14px;
margin-right: 20px;
margin-top: 10px;
"
src="@/assets/image/waterRefine/zx.svg"
alt="在线"
/>
<img
v-else-if="item.statusOnline === 0"
style="
width: 14px;
height: 14px;
margin-right: 20px;
margin-top: 10px;
"
src="@/assets/image/waterRefine/gz.svg"
alt="故障"
/>
</div>
<div class="main">
<div class="main-left">
<p class="ziti">昨日统计</p>
<div class="main-left-1">
<span class="ziti1">咳嗽程度</span>
<span class="ziti2">{{ item.kesou }} </span>
</div>
<div class="main-left-1">
<span class="ziti1">发烧率</span>
<span class="ziti2"> {{ item.fashao }} %</span>
</div>
<div class="main-left-1">
<span class="ziti1">腹泻率</span>
<span class="ziti2">{{ item.fuxie }} %</span>
</div>
<div class="main-left-1">
<span class="ziti1">舒适度</span>
<span v-if="item.comfortstatus === 1" class="ziti2">正常</span>
<span v-else-if="item.comfortstatus === 2" class="ziti3"
>报警</span
>
</div>
<div class="main-left-1">
<span class="ziti1">气体预警</span>
<span v-if="item.gasstatus === 1" class="ziti2">正常</span>
<span v-else-if="item.gasstatus === 2" class="ziti3">报警</span>
</div>
</div>
<div class="main-right">
<p class="zitiStatus">今日巡检运行状况</p>
<div class="main-left-1">
<span class="ziti1">计划巡检次数</span>
<span class="ziti2">{{ item.jihua }}</span>
</div>
<div class="main-left-1">
<span class="ziti1">已正常巡检</span>
<span class="ziti2">{{ item.zhengchang }}</span>
</div>
<div class="main-left-1">
<span class="ziti1">计划中断</span>
<span class="ziti2">{{ item.zhongduan }}</span>
</div>
</div>
</div>
</div>
</div>
<script>
// import navForm from '@/components/common/navForm'
// import { getConfigElement } from '@/utils/overtService'
import echartsModelOne from "./common/echartsModelOne";
import echartsModelTwo from "./common/echartsModelTwo";
// import { getPollingTree, getTree2, factoryEquipment } from './http/api/polling.js'
export default {
components: {
// navForm,
echartsModelOne,
echartsModelTwo,
},
data() { // 默认数据
return {
divListData: [
{
probability: "咳嗽率",
arrListOne: [
{ value: 100, name: "咳嗽率" },
{ value: 99, name: "" },
],
arrListTwo: [
{ value: 22, name: "显示的名称" },
{ value: 78, name: "100%" },
],
care: "保育",
fatten: "育肥",
},
{
probability: "发烧率",
arrListOne: [
{ value: 15, name: "发烧率" },
{ value: 85, name: "" },
],
arrListTwo: [
{ value: 18, name: "显示的名称" },
{ value: 43, name: "100%" },
],
care: "保育",
fatten: "育肥",
},
{
probability: "腹泻率",
arrListOne: [
{ value: 30, name: "腹泻率" },
{ value: 70, name: "" },
],
arrListTwo: [
{ value: 17, name: "显示的名称" },
{ value: 83, name: "100%" },
],
care: "保育",
fatten: "育肥",
},
{
probability: "舒适率",
arrListOne: [
{ value: 0, name: "舒适率" },
{ value: 0, name: "" },
],
arrListTwo: [
{ value: 18, name: "显示的名称" },
{ value: 82, name: "100%" },
],
care: "保育",
fatten: "育肥",
},
{
probability: "气体合格率",
arrListOne: [
{ value: 40, name: "气体合格率" },
{ value: 60, name: "" },
],
arrListTwo: [
{ value: 22, name: "显示的名称" },
{ value: 78, name: "100%" },
],
care: "保育",
fatten: "育肥",
},
],
// btn 按钮循环
itemspanList: [
{
index: 1,
stactive: 1,
itemname: "全部(100)",
},
{
index: 2,
stactive: 2,
itemname: "严重咳嗽(10/10%)",
},
{
index: 3,
stactive: 3,
itemname: "严重发烧(20/20%)",
},
{
index: 4,
stactive: 4,
itemname: "严重腹泻(15/15%)",
},
{
index: 5,
stactive: 5,
itemname: "舒适度异常(13/13%)",
},
{
index: 6,
stactive: 6,
itemname: "气体预警(12/12%)",
},
],
// 保育单元的赋值循环 deviceListInfos数组
deviceListInfos: [
{
byname: "保育1单元",
kesou: "轻度咳嗽",
fashao: "10",
fuxie: "10 ",
gasstatus: 1, // 气体预警正常
comfortstatus: 2, // 舒适度 正常报警
jihua: 10,
zhengchang: 5,
zhongduan: 2,
statusOnline: 0,
},
{
byname: "保育1单元",
kesou: "轻度咳嗽",
fashao: "10",
fuxie: "10 ",
gasstatus: 2, // 气体预警正常
comfortstatus: 1, // 舒适度 正常报警
jihua: 10,
zhengchang: 5,
zhongduan: 2,
statusOnline: 1,
},
{
byname: "保育2单元",
kesou: "轻度咳嗽",
fashao: "10",
fuxie: "10 ",
gasstatus: 1, // 气体预警正常
comfortstatus: 2, // 舒适度 正常报警
jihua: 10,
zhengchang: 5,
zhongduan: 2,
statusOnline: 0,
},
{
byname: "保育3单元",
kesou: "轻度咳嗽",
fashao: "10",
fuxie: "10 ",
gasstatus: 1, // 气体预警正常
comfortstatus: 2, // 舒适度 正常报警
jihua: 10,
zhengchang: 5,
zhongduan: 2,
statusOnline: 0,
},
],
timeStr: Date.now(), // 更新时间
stactive: 1, // 根据这个判断btn颜色
navFormInfo: {
data: {
city: [], // 区域三级
field: [],
deviceId: "",
},
fieldList: {
left: {
inpLists: [
{
key: "city",
type: "cascaderDiy",
className: "shadow",
customLabel: "regionName",
customValue: "regionNum",
placeholder: "请选择大区 / 区域 / 场区",
checkStrictly: true,
popperClass: "popperClass-radio-normal",
props: {},
options: [],
handleChange: (val) => {
console.log(val, "val");
if (val.length === 3) {
// 调取第二个接口树
const params = {
fieldId: val[2],
};
// getTree2(params).then(res =>{
// console.log(res, '第二个树的数组')
// if (res && res.status === 200) {
// this.navFormInfo.fieldList.left.inpLists[1].list = res.dada.data
// } else {
// this.navFormInfo.fieldList.left.inpLists[1].list = []
// }
// })
} else {
this.navFormInfo.fieldList.left.inpLists[1].list = [];
}
// this.getPollingList()
},
},
{
key: "device_version_id",
type: "select",
filterable: true, // 可搜索
props: {
label: "version_name",
value: "id",
},
className: "shadow",
clearable: "clearable",
placeholder: "全部工段",
list: [],
// roomtypeUnit: [], // 联动的第二个数组框
},
],
btnLists: [
{
innerText: "查询",
className: "btn-blue",
authCode: "bpFieldDeviceOverview:getDevicesByField",
handleClick: () => {
this.searchHandle(); // 查询
},
},
{
innerText: "重置",
className: "btn-border",
handleClick: () => {
this.$refs["navForm"].resetFields();
this.navFormInfo.data.city = [];
// this.fieldId = null
this.resetInfo();
},
},
],
},
},
},
};
},
computed: {
// allStyles() {
// return this.$store.state.echartStyle.allStyles
// }
},
watch: {
"allStyles.flag"(newValue, oldValue) {
console.log(newValue, oldValue);
// this.initChart() // 自己绘制echarts的方法
},
// 赋值搜索条件
// 'navFormInfo.data': {
// handler: function(n) {
// this.search.regionId = n.area[0] || ''
// this.search.areaId = n.area[1] || ''
// this.search.fieldId = n.area[2] || ''
// this.search.roomTypeId = n.roomtypeUnit[0] || ''
// this.search.unitId = n.roomtypeUnit[1] || ''
// this.search.status = n.status
// this.search.mac = n.mac
// this.search.deviceId = n.deviceId
// if (n.area.length === 0) {
// this.navFormInfo.fieldList.right.inpLists[0].valueKey++ // 只要监听到数据源发生变化 ，改变keyValue的值，达到重新渲染的效果
// this.navFormInfo.fieldList.right.inpLists[1].valueKey++
// }
// },
// deep: true
// },
},
created() {
// 暂时写在这里，后边放到mounted里 polling
// this.getTree() // 获取三级树
// 优先加载要显示的数据 this.getInfo()
this.init(this.stactive);
console.log("优先加载要显示的数据 this.stactive", this.stactive);
},
mounted() {
// this.initChart(this.seriesArr)
},
methods: {
// button按钮事件
itemClick(val) {
console.log(this.stactive, "点击了active", val);
this.stactive = val; // 点击了按钮赋值 改变 默认 的值
this.init(val); // 这里应该会在点击的时候触发相应的方法调取
},
init(val) {
console.log(val, "接收的val");
// getDefaultData().then(res => {
// console.log(res, '/res')
// this.deviceListInfos = res.data.deviceListInfos
// })
},
// 查询按钮
searchHandle() {
// 查询
const { city } = this.navFormInfo.data;
if (city.length === 0) {
this.$message({
message: "请选择场区",
type: "warning",
});
} else {
this.getInfos(); // 获取信息并赋值显示
}
// if (this.navDeviceList.length === 0) {
// this.$message.error('该场区暂无设备')
// this.show = false
// return
// }
// if (!this.navFormInfo.data.deviceId) {
// this.$message.error('请选择设备信息')
// this.show = false
// return
// }
},
getInfos() {
console.log("查询并要获取讯息");
},
// 优先获取三级树
getTree() {
// getPollingTree().then(res => {
// console.log(res, '/res')
// const arr = res.data.rows
// arr.forEach(item => {
// if (item.children && item.children.length) {
// item.children.forEach(child => {
// if (child.children && child.children.length) {
// child.children.forEach(delItem => {
// delete delItem.children
// })
// }
// })
// }
// })
// this.navFormInfo.fieldList.left.inpLists[0].options = arr
// })
},
// 点击获取三级的数据为 工段做准备
getPollingList() {
this.navFormInfo.data.deviceId = "";
const { field } = this.navFormInfo.data;
this.$httpRequest({
type: "post",
payload: {
regionId: field[0],
areaId: field[1],
fieldId: field[2],
// equiptypeName: '后端给的名称字段固定的'
},
uri: "/intelligent_water/myEquipment/getPageList",
callback: (res) => {
console.log(res, "///res");
// if (res && res.status === 200 ) {
// this.navFormInfo.data.roomtypeUnit = res.data.rows
// }
},
});
},
getInfo() {
// this.$httpRequest({
// type: 'get',
// uri: pageElement && pageElement.getInfos && pageElement.getInfos.uri,
// payload: {
// deviceId: this.deviceId
// },
// callback: res => {
// if (res.status === 200) {
// this.deviceInfos = res.data
// }
// }
// })
},
// 重置操作
resetInfo() {
this.navFormInfo.data = {
city: [], // 区域三级清空
};
this.navFormInfo.fieldList.left.inpLists[1].list = []; // 工段清空
// this.initChart(this.seriesArr)
},
},
};
</script>
<style lang="less" scoped>
.fieldbusinessOverview {
.content_top {
display: flex;
justify-content: space-between;
height: 180px;
padding: 5px;
.cardbox {
width: 19%;
background: rgba(8, 48, 134, 0);
border: 1px solid #6498ff;
border-radius: 9px;
box-shadow: 0px 0px 15px 0px #1c63ff inset;
&-title {
font-weight: 500;
text-align: center;
padding: 20px;
font-size: 12px;
}
.cartop {
width: 100%;
height: 40%;
display: inline-flex;
margin-top: -10px;
.facilitySort {
width: 50%;
height: 100%;
}
.facilitySort2 {
width: 50%;
height: 50%;
}
}
.cardboxSpan {
width: 100%;
display: flex;
justify-content: space-around;
font-size: 12px;
margin-top: 10px;
}
}
}
}
.tabs {
display: flex;
padding-left: 5px;
&-item {
padding: 0 15px;
height: 30px;
opacity: 1;
border: 1px solid #6498ff;
border-radius: 3px;
box-shadow: 0px 0px 10px 0px #217bfc inset;
text-align: center;
line-height: 30px;
font-size: 12px;
margin-right: 20px;
margin-top: 20px;
cursor: pointer;
font-weight: 500;
}
&-item-active {
background: #10aeff;
box-shadow: none;
border: 0;
}
}
.dabiaoge {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
padding-left: 5px;
.biaoge {
width: 32%; // 360px;
height: 236px;
margin-top: 20px;
opacity: 1;
border: 1px solid #6498ff;
border-radius: 5px;
box-shadow: 0px 0px 25px 0px #1c63ff inset;
margin-right: 23px;
.danyuan {
width: 96%;
height: 38px;
opacity: 1;
background: rgba(100, 152, 255, 0.3);
border-radius: 4px;
padding-left: 20px;
line-height: 38px;
font-size: 14px;
font-weight: 500;
display: flex;
justify-content: space-between;
}
.main {
width: 100%;
height: calc(100% - 38px);
display: flex;
margin-top: -10px;
&-left {
padding: 20px;
width: 50%;
&-1 {
display: flex;
justify-content: space-between;
}
}
&-right {
padding: 20px;
width: 50%;
}
.ziti {
height: 14px;
opacity: 1;
font-size: 14px;
font-family: SourceHanSansCN, SourceHanSansCN-Medium;
font-weight: 500;
color: #19ddff;
line-height: 21px;
width: 56px;
}
.zitiStatus {
width: 112px;
height: 14px;
opacity: 1;
font-size: 14px;
font-family: SourceHanSansCN, SourceHanSansCN-Medium;
font-weight: 500;
text-align: center;
color: #19ddff;
line-height: 21px;
}
.ziti1 {
margin-top: 15px;
height: 12px;
opacity: 1;
font-size: 12px;
font-family: SourceHanSansCN, SourceHanSansCN-Normal;
font-weight: Normal;
text-align: center;
line-height: 18px;
}
.ziti2 {
text-align: center;
margin-top: 15px;
width: 48px;
height: 12px;
opacity: 1;
font-size: 12px;
font-family: SourceHanSansCN, SourceHanSansCN-Normal;
font-weight: Normal;
color: #19eba4;
line-height: 18px;
}
.ziti3 {
width: 48px;
height: 12px;
opacity: 1;
font-size: 12px;
font-family: SourceHanSansCN, SourceHanSansCN-Normal;
font-weight: Normal;
text-align: center;
color: #ff5656;
line-height: 18px;
margin-top: 15px;
}
}
}
.biaoge:nth-child(3n) {
margin-right: 0;
}
}
.device-timeStr {
float: right;
margin-top: -40px;
width: 197px;
height: 12px;
opacity: 1;
font-size: 12px;
font-weight: Normal;
text-align: left;
}
</style>
下边是封装的组件 echartsModelOne.vue
<template>
<div class="mainEcarts">
<!-- 组件1左侧第一个 -->
<div ref="chart1" class="facilitySort" />
</div>
</template>
<script>
export default {
props: ["seriesArrOne"],
data() {
return {
retrunJsonArr: [],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const _this = this;
const option = {
tooltip: {
// 配置提示信息：
trigger: "item",
// formatter: '{a} <br/>{b}: {c} ({d}%)',
// showContent: true,
// show: false
show: true,
},
grid: {
top: "1%",
},
series: [
// 系列列表 每个系列通过 type 决定自己的图表类型
{
name: "保育",
type: "pie", // 类型为饼状图
clickable: false,
radius: ["50%", "70%"], // 饼图的半径
avoidLabelOverlap: false,
label: {
show: true, // show: false,
position: "center",
formatter: function () {
// 返回中心的数字显示 params
// console.log(params, 'paramsparamsparams', _this.seriesArrOne)
// return params.value
// forEach循环遍历数组
var echartsArr = _this.seriesArrOne;
// console.log(echartsArr)
var val = [];
let val1 = "";
echartsArr.forEach((item) => {
// console.log(item.value)
val.push(item.value);
// console.log(val)
val1 = val[0];
});
return `${val1} %`;
// return `${_this.seriesArrOne[0].value}%`
},
// formatter:function(name){ //该函数用于设置图例显示后的百分比
// var data = list
// var total = 0;
// var value;
// list.forEach((item)=>{
// total += item.value;
// if (item.name == name) {
// value = item.value;
// }
// })
// var p = Math.round(((value / total) * 100)); //求出百分比
// return `${name} ${p}%`; //返回出图例所显示的内容是名称+百分比
// },
textStyle: {
fontSize: 12,
},
},
emphasis: {
label: {
show: true,
fontSize: "14",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: this.seriesArrOne,
color: ["#03C785", "#D2D2D2"],
},
],
};
this.$nextTick(() => {
setTimeout(() => {
this.myChart1 = this.$echarts.init(this.$refs.chart1);
this.myChart1.setOption(option, true);
// console.log(option, '/option')
// const arrOne = []
// option.series.forEach(item => {
// console.log(item, '/item 每一项')
// item.data.forEach(el => {
// console.log(el, '/el')
// arrOne.push(el.value)
// this.retrunJsonArr = arrOne
// console.log(this.retrunJsonArr)
// })
// })
}, 100);
});
},
},
};
</script>
<style lang="less" scoped>
.mainEcarts {
width: 100%;
height: 100%;
.facilitySort {
width: 100%;
height: 100%;
}
}
</style>
echartsModelTwo.vue
<template>
<div class="mainEcarts">
<!-- 组件2右侧第一个 -->
<div ref="chart1" class="facilitySort" />
</div>
</template>
<script>
export default {
props: ["seriesArrTwo"],
data() {
return {
retrunJsonArr: [
// { value: 108, name: '17%' },
// { value: 430, name: '22%' }
],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const _this = this;
const option = {
tooltip: {
// 配置提示信息：
trigger: "item",
// formatter: '{a} <br/>{b}: {c} ({d}%)',
show: false,
// show: true
},
grid: {
top: "1%",
},
series: [
// 系列列表 每个系列通过 type 决定自己的图表类型
{
name: "育肥",
type: "pie", // 类型为饼状图
clickable: false,
radius: ["60%", "70%"], // 饼图的半径
avoidLabelOverlap: false,
label: {
show: true, // show: false,
position: "center",
formatter: function () {
//params
// console.log(params, 'paramsparamsparams', _this.seriesArrTwo)
// return params.value
// return _this.seriesArrTwo[0].value
return `${_this.seriesArrTwo[0].value}%`;
},
// formatter:function(name){ //该函数用于设置图例显示后的百分比
// var data = list
// var total = 0;
// var value;
// list.forEach((item)=>{
// total += item.value;
// if (item.name == name) {
// value = item.value;
// }
// })
// var p = Math.round(((value / total) * 100)); //求出百分比
// return `${name} ${p}%`; //返回出图例所显示的内容是名称+百分比
// },
textStyle: {
fontSize: 12,
},
},
emphasis: {
label: {
show: true,
fontSize: "14",
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: this.seriesArrTwo,
color: ["#E6D300", "#D2D2D2"],
},
],
};
this.$nextTick(() => {
setTimeout(() => {
this.myChart1 = this.$echarts.init(this.$refs.chart1);
this.myChart1.setOption(option, true);
}, 100);
});
},
},
};
</script>
<style lang="less" scoped>
.mainEcarts {
width: 100%;
height: 100%;
.facilitySort {
width: 100%;
height: 100%;
}
}
</style>
这样就彻底结束了，当然接口就自己慢慢写吧
3285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
