一、柱状图:头部居右
二、 饼图: 判断颜色
div:<div class="main">
<div id="PieChart"></div>
</div>
data:
pierChart: null
mounted:this.pierChart = this.$echarts.init(document.getElementById('PieChart'))
this.pireChart()
this.$nextTick(() => {
window.addEventListener('resize', () => {
this.pierChart && this.pierChart.resize()
})
})
beforeDestroy:
this.pierChart = null
methods:pireChart() {
this.pierChart && this.pierChart.clear()
this.pierChart.setOption({
title: {
text: 'Title',
left: "2%",
top: 10,
textStyle: {
color: "#ccc",
fontSize: 15,
},
},
legend: {
textStyle: {
color: "#fff",
},
top: "130",
right: "0",
show: true, // 是否显示图例
// type: "plain", // 'plain':普通图例。缺省就是普通图例; 'scroll':可滚动翻页的图例。当图例数量较多时可以使用
// x: "right", //居右显示
// y: "center", //延Y轴居中
orient: "vertical", // 图例列表的布局朝向; horizontal; vertical
align: "left",
color: "#fff",
},
// color: ["#45b97c", "#009ad6", "#ae6642"],
series: [
{
name: "",
type: "pie",
radius:["37%", "55%"],
center: ['25%', '60%'], // 居左
// roseType: "area",
itemStyle: {
borderRadius: 0,
color: (params) => {
// console.log(params, "params----饼图");
if (params.data.name == &#
echarts:标签( 全部的 )
于 2024-04-18 18:23:30 首次发布