<template>
<div :id="halfCakeData.id" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
import echarts from "echarts";
export default {
name: "hello",
props:{
halfCakeData:{
type: Object,
}
},
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
let placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
}
};
let total = 50;
// 基于准备好的dom,初始化echarts实例
let that=this;
let myChart = this.$echarts.init(document.getElementById(that.halfCakeData.id));
// 绘制图表
myChart.setOption({
title: {
text: "室内温度", //主标题
subtext: "26℃", //副标题
textStyle: {
//主标题样式
color: "#fff",
fontWeight: "bold",
fontSize: 20
},
subtextStyle: {
//副标题样式
color: "#fff",
fontSize: 20,
fontWeight: "bold",
color: "#0f0"
},
left: "center",
top: "middle"
},
tooltip: {
show: true,
trigger: "item", //提示框触发类型,item数据项图形触发,主要应用于无类目轴的图表(散点图、饼形图等)
formatter: function(params, ticket, callback) {
//第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
return params.seriesName + ": " + params.value + "℃"; //系列名称:数据值
}
},
series: [
{
name: "室内温度",
type: "pie",
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: [50, 70],
itemStyle: placeHolderStyle,
data: [
{
value: 26,
itemStyle: {
normal: {//颜色渐变
color: {
type: "linear", //线性方式
x: 0,
y: 0,
x2: 0,
y2: 1,
// type:'radial',//径向渐变
// x:0.5,
// y:0.5,
// r:0.5,
colorStops: [
{
offset: 0, //0%处的颜色
color: "#78cdd1"
},
{
offset: 1, //100%处的颜色
color: "#07A0F5"
}
],
global: false //缺省为false
}}
}
},
{
value: total - 26,
itemStyle: {
normal: {
color: "transparent"
}
}
}
]
}
]
});
}
}
};
</script>
<style>
</style>
vue echarts 饼图半圆样式
最新推荐文章于 2024-06-27 17:27:04 发布