eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应。否则不出效果！！目前已知可以生效有：第一种1：第二种2：下载后在页面上引入然后像使用eacharts一样的流程就行。
·
eacharts-gl下载时版本一定要和eacharts版本对应。否则不出效果！！目前已知可以生效有：
第一种1：
npm install echarts@5.1.2 --save
npm install echarts-gl@2.0.5 --save
第二种2：
npm install echarts@5.0.2 --save
npm install echarts-gl@2.0.9 --save
下载后在页面上引入然后像使用eacharts一样的流程就行
import * as echarts from "echarts";
import "echarts-gl";
// 渐变进度条加进度背景实现：
效果：
//实现： dom结构： <div ref='rightcontentchart'></div>
注意定宽高
//方法
getrightcontentchart2() {
let myChart = echarts.init(this.$refs.rightcontentchart);
// var salvProName =["安徽省","河南省","浙江省","湖北省","贵州省","江西省","江苏省","四川省","云南省","湖南省"];
var salvProName = this.rightswoptions;
var salvProValue = [239, 181, 154,103];
var salvProMax = []; //背景按最大值
for (let i = 0; i < salvProValue.length; i++) {
salvProMax.push(salvProValue[0]);
}
var attackSourcesColor = [
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#008AFB" },
{ offset: 1, color: "#71B1FF" }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#00BFB0" },
{ offset: 1, color: "#00DCE3" }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#E2EC00" },
{ offset: 1, color: "#DCF87A" }
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#7B65E9" },
{ offset: 1, color: "#9F9BE1" }
])
];
// 渐变颜色
function attackSourcesDataFmt(sData) {
var sss = [];
sData.forEach(function(item, i) {
let itemStyle = {
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i]
};
sss.push({
value: item,
itemStyle: itemStyle
});
});
return sss;
}
let option = {
// backgroundColor: "#003366",
grid: {
left: "2%",
right: "2%",
bottom: "2%",
top: "2%",
containLabel: true
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none"
},
formatter: function(params) {
return params[0].name + " : " + params[0].value;
}
},
xAxis: {
show: false,
type: "value"
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
data: salvProName
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12"
}
},
data: salvProValue
}
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 30,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#7f6fe3"
},
{
offset: 1,
color: "#dcf56b"
}
])
}
},
// 柱状宽度
barWidth: 15,
// salvProValue 数值，保证颜色渐变效果
data: attackSourcesDataFmt(salvProValue)
},
{
name: "背景",
type: "bar",
// 背景宽度
barWidth: 15,
barGap: "-100%",
data: salvProMax,
itemStyle: {
normal: {
color: "#305067",
barBorderRadius: 30
}
}
}
]
};
window.addEventListener("resize", () => echart.resize(), false);
option && myChart.setOption(option);
},//最后在mounted中调用这个方法
柱状图折线图x轴y轴显示不全解决：在对应的x或y轴中设置
axisLabel: {
interval:0, //0代表全部显示
},
3d柱状图加折线图，含折线拐点样式
效果：
<template>
<div class="echarts" id='charts2' ></div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
// import "echarts/lib/chart/bar"
export default {props: {
x: {
type: Array
},
y: {
type: Array
},
// 折线数据
brokendata: {
type: Array
},
// 柱状数据
columndata: {
type: Array
}
},
name: "",
data() {
return {};
},
created() {},
mounted() {
this.getchart();
},
methods: {
getchart() {
console.log(this.columndata);
// let rightbotcolumndata1 = this.rightbotcolumndata;
var myChart = echarts.init(document.getElementById("charts2"));
let option = {
// backgroundColor: "#041730",
grid: {
top: "20%",
bottom: "20%"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
}
},
legend: {
data: ["面积", "数量"],
// data: ["同比增长量", "驾驶人保有量"],
top: "8%",
textStyle: {
color: "#ffffff"
}
},
xAxis: {
// data: ["2015", "2016", "2017", "2018", "2019"],
data: this.x,
offset: 12,
axisLine: {
show: false
},
axisLabel: {
// 让x轴完全显示
interval: 0,
textStyle: {
color: "#C9ECFF"
}
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [
{
type: "value",
name: "(公顷)",
min: 0,
max: 400,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#C9ECFF"
}
},
axisLine: {
show: false,
lineStyle: {
color: "#C9ECFF"
}
},
axisTick: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: "#C9ECFF"
}
}
},
{
type: "value",
name: "次",
// min:1,
nameTextStyle: {
color: "#C9ECFF"
},
position: "right",
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: "{value}", //右侧Y轴文字显示
textStyle: {
color: "#C9ECFF"
}
}
},
{
type: "value",
gridIndex: 0,
min: 50,
max: 100,
splitNumber: 8,
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: [
{
// 面积
type: "bar",
name: "面积",
barWidth: 8,
emphasis: {
itemStyle: {
color: "#7fb7e9"
}
},
itemStyle: {
normal: {
color: "#52adff",
barBorderRadius: [0, 0, 0, 0]
}
},
// data: [220, 182, 191, 234, 223]
data: this.columndata
},
{
// 数量
// name: "同比增长量",
name:'数量',
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
symbol: "circle",
stack: "Total",
showAllSymbol: false,
symbolSize: 15, //标记的大小
lineStyle: {
color: "#988CE9",
width: 2
},
itemStyle: {
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "#988CE9" //中心颜色
},
{
offset: 0.4,
color: "#988CE9"
},
{
offset: 0.5,
color: "#ffffff00"
},
{
offset: 1,
color: "#ffffff00"
}
]
},
borderColor: "#988CE9",
borderWidth: 2
},
// data: [17, 22, 32, 24, 45]
data:this.brokendata
},
{
// name: "驾驶人保有量",
name:'面积',
tooltip: {
show: false
},
type: "bar",
barWidth: 8,
emphasis: {
itemStyle: {
color: "#2e9bff"
}
},
itemStyle: {
normal: {
color: "#0980ed",
barBorderRadius: [0, 0, 0, 0]
}
},
// data: [220, 182, 191, 234, 223],
data:this.columndata,
barGap: 0,
legendHoverLink: false
},
{
// name: "驾驶人保有量",
name:'面积',
tooltip: {
show: false
},
type: "pictorialBar",
itemStyle: {
normal: {
color: "#73bbff"
// borderWidth:1,
// borderColor:'#3c93fc'
}
},
// symbol:
"image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAAA/ElEQVQ4ja2VOw7CMBBEHyEV4iAUdIC4BxId3xbOk5qAoEIcBNFSUHAGKkQJaKUYmfgTJ8pISbHr3Zkd20ljdPoQiDaQ3B+8gTXwCimLjYgdXeAIdLJsHxgDN+tqDZERMbEAzlpzMsILMDNWlyAQS7bABmgZ2eK8lyBYoWNCL4G3wAElaOojkJF3RSN7YK1XBE4FFfDnQFTRkiL8BNv2oC5I71heKdADrjU2lws4lP2IcoHUWFoeB2CgBOsWybdlmT3PCo1V/USvt+1BqisIhNMBGwG+Agv2PkEuAn3kucMylZe747Q05JjK7cwrDJ4w9H+gGiZAE1gFHQTgC/m7OlXDmboLAAAAAElFTkSuQmCC",
symbolRotate: 0,
symbolSize: ["17", "7"],
symbolOffset: ["0", "4"],
symbolPosition: "start",
// data: [220, 182, 191, 234, 223],
data:this.columndata,
z: 3
},
{
// name: "驾驶人保有量",
name:'面积',
tooltip: {
show: false
},
type: "pictorialBar",
itemStyle: {
normal: {
color: "#73bbff"
// borderWidth:1,
// borderColor:'#3c93fc'
}
},
// symbol:
// //"image://data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAASCAYAAABB7B6eAAABIElEQVQ4jaWVMWoCQRSGv0iKFIm3MLVFYshFbGxMEwTTeQxrBTuFVMkRPMBWhhQpAh5CEBEJhMgjb2T0ze7Mrh8sLPNm5h++nZm9GMz/SKQOjLVrD9ikDLs0LWGawBvQ0GoLaAOfwd4eNdNieQYyb3L0PdNaIUUBN8ArMAGuTPW/baJ9rk1VyQsQJQugYyoW6fOhYwyhgJCSGLnK/ICYkhhBZS6gjJIYHZ2r6QKqKIlx65RJwAr4iQyowq/MKwHvwF3KoSnBl845dd9gCTx6V8E5TIEH4JuTXbQD+noFrCsEyN30pM/WNYbOQRVlouReV39EKABP2chULEdKUgNQZS8FykRJ91RJmQBHSJlTMosNTv0fOGVDvQZkM+Su+gCwB/qVO5cbNt4bAAAAAElFTkSuQmCC",
symbolRotate: 0,
symbolSize: ["17", "7"],
symbolOffset: ["0", "-4"],
symbolPosition: "end",
// data: [220, 182, 191, 234, 223],
data:this.columndata,
z: 3
}
]
};
window.addEventListener("resize", () => echart.resize(), false);
option && myChart.setOption(option);
}
},
components: {}
};
</script>
<style lang='scss' scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
传递的数据结构如下：
y可以不传，在y轴定min和max值就可以
3d饼图：实心饼图、环形饼图
3d饼图效果实心表面凹凸不平（1）会根据数值的大小厚度会改变
3d饼图效果实心表面平整，鼠标移入凸出（2）
3d 环形图效果
根据传参不同就可以实现具体看下方
<template>
<div class="e-bar">
//图表子组件
<div :style="{height: height, width: width}" :id="id" :option="optionData" :unit='unit'></div>
<!-- <echartsComponent :id="id" width="100%"
height="100%" :option="option"
/> -->
</div>
</template>
<script>
//import echartsComponent from '@/components/echartsComponent.vue'
import * as echarts from 'echarts'
import 'echarts-gl';
export default {
//components: { echartsComponent },
// 验证类型
props: {
optionData: {
type: Array
},
num: {
type: Number
},
id: {
type: String
},
distance:{
type: Number
},
// option: {
// type: Object
// },
unit: {
type: String,
default:''
},
hiSame: {
type: Boolean,
default:false
}
},
data() {
return {
option:{},
height:'100%',
width:'100%',
maxvalue:0,
}
},
mounted () {
// if (!(JSON.stringify(this.option) === '{}')) {
// this.$nextTick(() => {
// let myChart = this.$echarts.init(document.getElementById(this.id))
// // myChart.clear()
// myChart.setOption(this.option)
// })
// }
this.optionData.forEach(item=>{
if(item.value>this.maxvalue){
this.maxvalue=item.value
}
})
this.$nextTick(function() {
this.init(this.num);
});
},
methods: {
init(num) {
// 构建3d饼状图
const myChart = echarts.init(document.getElementById(this.id));
// 传入数据生成 option
this.option = this.getPie3D(this.optionData, num);
debugger
myChart.setOption(this.option);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
this.option.series.push({
name: 'pie2d',
// type: 'pie',
labelLine: {
length: 10,
length2: 10
},
startAngle: -20, // 起始角度，支持范围[0, 360]。
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['20%', '50%'],
center: ['40%', '50%'],
data: this.optionData,
itemStyle: {
opacity: 0
},
});
myChart.setOption(this.option);
this.bindListen(myChart);
},
getPie3D(pieData, internalDiameterRatio) {
//debugger
// internalDiameterRatio:透明的空心占比
const that = this;
const series = [];
let sumValue = 0;
let startValue = 0;
let endValue = 0;
let legendData = [];
let legendBfb = [];
const k = 1 - internalDiameterRatio;
pieData.sort((a, b) => {
return (b.value - a.value);
});
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
const seriesItem = {
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: false,
hovered: false,
k: k
},
center: ['2%', '50%'],
// center: ['50%', '50%'],
// radius: ['80%', '100%'],
};
console.log(sumValue);
debugger
if (typeof pieData[i].itemStyle !== 'undefined') {
const itemStyle = {};
typeof pieData[i].itemStyle.color !== 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
typeof pieData[i].itemStyle.opacity !== 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
seriesItem.itemStyle = itemStyle;
}
series.push(seriesItem);
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
legendData = [];
legendBfb = [];
for (let i = 0; i < series.length; i++) {
endValue = startValue + series[i].pieData.value;
series[i].pieData.startRatio = startValue / sumValue;
series[i].pieData.endRatio = endValue / sumValue;
series[i].parametricEquation = this.getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio,
false, false, k,this.hiSame ? series[0].pieData.value : series[i].pieData.value);
startValue = endValue;
const bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
legendData.push({
name: series[i].name,
value: bfb
});
legendBfb.push({
name: series[i].name,
value: bfb
});
}
const boxHeight = this.getHeight3D(series,30);// 通过传参设定3d饼/环的高度，26代表26px
//debugger
const getHeight3DSame=this.getHeight3DSame(series,30)
// 准备待返回的配置项，把准备好的 legendData、series 传入。
const option = {
legend: {
data: legendData,
orient: 'horizontal',
// left: '10%',
// right:'10%',
bottom: '8%',
y:'bottom',
x:'center',
bottom: '10%',
// padding: [5, 20],
itemGap: 10,
// itemWidth:25,
textStyle: {
color: '#A1E2FF',
},
show: true,
icon: 'circle',
formatter: function(param) {
const item = legendBfb.filter(item => item.name === param)[0];
const bfs = that.fomatFloat(item.value * 100, 2) + '%';
return `${item.name}`;
}
},
labelLine: {
show: true,
lineStyle: {
color: '#7BC0CB'
}
},
label: {
show: true,
position: 'outside',
rich: {
b: {
color: '#7BC0CB',
fontSize: 12,
lineHeight: 20
},
c: {
fontSize: 16
}
},
formatter: '{b|{b} \n}{c|{c}}{b| 亩}'
},
tooltip: {
trigger: 'item',
backgroundColor: '#001c38cf',
borderColor: '#00B8FF',
borderWidth: 2,
borderRadius: 8,
textStyle: {
align: 'left',
fontSize: 14,
color: '#fff'
},
formatter: (params) => {
console.log(option.series[params.seriesIndex])
console.log(params,'paramsparams')
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
const bfb = ((option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) * 100).toFixed(2)
return `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + `${params.seriesName}<br/>` + '数值：' + option.series[params.seriesIndex].pieData.value + `${this.unit}<br/>` + '占比：' + `${bfb}%`
}
}
},
// x,y,z调整大小的
xAxis3D: {
min: -1,
max: 1
},
yAxis3D: {
min: -1,
max: 1
},
zAxis3D: {
min: -1,
max: 1
},
grid3D: {
show: false,
top:'-10%',
boxHeight:boxHeight, // 圆环的高度
viewControl: { // 3d效果可以放大、旋转等，请自己去查看官方配置
alpha: 30, // 角度
distance: this.distance, // 调整视角到主体的距离，类似调整zoom
rotateSensitivity: 1, // 设置为0无法旋转
zoomSensitivity: 1, // 设置为0无法缩放
panSensitivity: 0, // 设置为0无法平移
autoRotate: false // 自动旋转
},
// width: 165 // 图形的大小
},
series: series
};
console.log(series,'=======series==============')
return option;
},
// 获取3d丙图的最高扇区的高度
getHeight3D(series, height) {
//debugger
series.sort((a, b) => {
return (b.pieData.value - a.pieData.value);
})
return height * 25 / series[0].pieData.value;
},
//高度相同
getHeight3DSame(series, height) {
return 20
return height * 25 / series[0].pieData.value;
},
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
if(this.hiSame){
h=this.maxvalue
}
//debugger
// 计算
const midRatio = (startRatio + endRatio) / 2;
const startRadian = startRatio * Math.PI * 2;
const endRadian = endRatio * Math.PI * 2;
const midRadian = midRatio * Math.PI * 2;
// 如果只有一个扇形，则不实现选中效果。
// if (startRatio === 0 && endRatio === 1) {
// isSelected = false;
// }
isSelected = false;
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== 'undefined' ? k : 1 / 3;
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
// 计算高亮效果的放大比例（未高亮，则比例为 1）
const hoverRate = isHovered ? 1.05 : 1;
// 返回曲面参数方程
return {
u: {
min: -Math.PI,
max: Math.PI * 3,
step: Math.PI / 32
},
v: {
min: 0,
max: Math.PI * 2,
step: Math.PI / 20
},
x: function(u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
},
y: function(u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
},
z: function(u, v) {
console.log(u, v)
if (u < -Math.PI * 0.5) {
// console.log(Math.sin(u),'Math.sin(u);');
// return 6000
return Math.sin(u);
}
if (u > Math.PI * 2.5) {
// console.log(Math.sin(u) * h * 0.1,'Math.sin(u);');
// return 6000
return Math.sin(u) * h * 0.1;
}
// console.log(Math.sin(v) > 0 ? 1 * h * 0.1 : -1,'Math.sin(v) > 0 ? 1 * h * 0.1 : -1;');
// return 6000
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
}
};
},
fomatFloat(num, n) {
//debugger
var f = parseFloat(num);
if (isNaN(f)) {
return false;
}
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
var s = f.toString();
var rs = s.indexOf('.');
// 判定如果是整数，增加小数点再补0
if (rs < 0) {
rs = s.length;
s += '.';
}
while (s.length <= rs + n) {
s += '0';
}
return s;
},
bindListen(myChart) {
//debugger
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
const that = this;
let selectedIndex = '';
let hoveredIndex = '';
// 监听点击事件，实现选中效果（单选）
myChart.on('click', function(params) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
const isSelected = !that.option.series[params.seriesIndex].pieStatus.selected;
const isHovered = that.option.series[params.seriesIndex].pieStatus.hovered;
const k = that.option.series[params.seriesIndex].pieStatus.k;
const startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
const endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
that.option.series[selectedIndex].parametricEquation = that.getParametricEquation(that.option.series[
selectedIndex].pieData
.startRatio, that.option.series[selectedIndex].pieData.endRatio, false, false, k, that.option.series[
selectedIndex].pieData
.value);
that.option.series[selectedIndex].pieStatus.selected = false;
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
isSelected,
isHovered, k, that.option.series[params.seriesIndex].pieData.value);
that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
isSelected ? selectedIndex = params.seriesIndex : null;
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
});
// 监听 mouseover，近似实现高亮（放大）效果
myChart.on('mouseover', function(params) {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
// 如果触发 mouseover 的扇形当前已高亮，则不做操作
if (hoveredIndex === params.seriesIndex) {
return;
// 否则进行高亮及必要的取消高亮操作
} else {
// 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
k = that.option.series[hoveredIndex].pieStatus.k;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
isSelected,
isHovered, k, that.option.series[hoveredIndex].pieData.value);
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = that.option.series[params.seriesIndex].pieStatus.selected;
isHovered = true;
startRatio = that.option.series[params.seriesIndex].pieData.startRatio;
endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
k = that.option.series[params.seriesIndex].pieStatus.k;
// 对当前点击的扇形，执行高亮操作（对 option 更新）
that.option.series[params.seriesIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
isSelected, isHovered, k, that.option.series[params.seriesIndex].pieData.value + 5);
that.option.series[params.seriesIndex].pieStatus.hovered = isHovered;
// 记录上次高亮的扇形对应的系列号 seriesIndex
hoveredIndex = params.seriesIndex;
}
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
}
});
// 修正取消高亮失败的 bug
myChart.on('globalout', function() {
// 准备重新渲染扇形所需的参数
let isSelected;
let isHovered;
let startRatio;
let endRatio;
let k;
if (hoveredIndex !== '') {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
isSelected = that.option.series[hoveredIndex].pieStatus.selected;
isHovered = false;
k = that.option.series[hoveredIndex].pieStatus.k;
startRatio = that.option.series[hoveredIndex].pieData.startRatio;
endRatio = that.option.series[hoveredIndex].pieData.endRatio;
// 对当前点击的扇形，执行取消高亮操作（对 option 更新）
that.option.series[hoveredIndex].parametricEquation = that.getParametricEquation(startRatio, endRatio,
isSelected,
isHovered, k, that.option.series[hoveredIndex].pieData.value);
that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
// 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
hoveredIndex = '';
}
// 使用更新后的 option，渲染图表
myChart.setOption(that.option);
});
}
},
watch: {
// option() {
// this.$nextTick(() => {
// let myChart = this.$echarts.init(document.getElementById(this.id))
// // myChart.clear()
// myChart.setOption(this.option)
// })
// }
}
}
</script>
<style >
.e-bar{
width: 100%;
height: 100%;
}
</style>
父组件
<!-- optionData：数据 // num: 0.9,//0.9是环形图0是是实心饼图 distance：视角远近 hiSame：是否平面 true是平面false不是 id:自己起一个id名字-->
例： <子组件名:optionData='optionsdata' :num='num' :distance=270 :hiSame='false' :id='lefteachartssid'></子组件名>
数组结构：
optionsdata: [
{
name: "国有",
value: 20,
itemStyle: {
opacity: 1,
color: "#00E3FF"
}
},
{
name: "集体",
value: 19,
itemStyle: {
opacity: 1,
color: "#968DE3"
}
},
{
name: "个人",
value: 12,
itemStyle: {
opacity: 1,
color: "#D6F94E"
}
}
],
num:0,
电影级数字人，免显卡端渲染SDK，十行代码即可调用，工业级demo免费开源下载！
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)