echarts疑难杂症

• • • 1.调整柱状图、饼图的大小
    • 2.嵌套饼图且颜色保持一致
    • 3.并排展示饼图且中间展示文字
    • 4.折线图（柱状图）双y轴
    • 5.使用echarts5
    • 6.图形不展示的问题

1.调整柱状图、饼图的大小

//柱状图主要根据grid属性中的top/bottom/left/right属性调整大小
let option = {grid: {left: 25,right: 25,bottom:25,top:25,containLabel: true, // 保证label不会被挤掉},
}//饼图调整主要根据radius调整饼图的大小(官方描述：数组的第一项是内半径，第二项是外半径),
//调整位置依旧可以按照上下左右以及center属性
//radius[0](案例中的40%，数值越大则越细，反之越粗),
//radius[1](案例中的70%，数值越大则图越大，反之越小)
let option = {series: [{type: "pie",left: 25,right: 25,bottom:25,top:25, radius: ["40%", "70%"],center: ["50%", "50%"],avoidLabelOverlap: false,}]}

2.嵌套饼图且颜色保持一致

可以参考该博主

3.并排展示饼图且中间展示文字

//并排展示饼图需要注意center属性，具体摆放位置可以自己调//展示文字主要取决于formatter属性，如果里面文字过多或者多行文字，
//可以通过"{aaa|我叫aaa}"+"\n"+"{bbb|我叫bbb}",则下面可以通过rich属性去给前面设置的aaa或bbb设置单独样式
let option = {series: [{type: "pie",center: ["12.5%", "50%"],radius: ["75%", "90%"],data: [{value: 28,name: "Quoted",label: {position: "center",formatter: "{proportion|13/15}" + "\n" + "{title|Quoted}",rich: {proportion: {fontSize: 12,fontFamily: "微软雅黑",fontWeight: 700,color: "#000",lineHeight: 20,},title: {fontSize: 10,fontFamily: "微软雅黑",color: "#7e7e7e",},},},itemStyle: {color: "#00af50",},},{value: 13,name: "",label: {show: false,},itemStyle: {color: "#a6a6a7",},},],},{type: "pie",center: ["37.5%", "50%"],radius: ["75%", "90%"],data: [{value: 26,name: "Shortlist",label: {position: "center",formatter: "{proportion|11/15}" + "\n" + "{title|Shortlist}",rich: {proportion: {fontSize: 12,fontFamily: "微软雅黑",fontWeight: 700,color: "#000",lineHeight: 20,},title: {fontSize: 10,fontFamily: "微软雅黑",color: "#7e7e7e",},},textStyle: {color: "#000",fontSize: 12,},},itemStyle: {color: "#c00000",},},{value: 15,name: "",label: {show: false,},itemStyle: {color: "#a6a6a7",},},],},{type: "pie",center: ["62.5%", "50%"],radius: ["75%", "90%"],data: [{value: 26,name: "Sampling",label: {position: "center",formatter: "{proportion|11/15}" + "\n" + "{title|Sampling}",rich: {proportion: {fontSize: 12,fontFamily: "微软雅黑",fontWeight: 700,color: "#000",lineHeight: 20,},title: {fontSize: 10,fontFamily: "微软雅黑",color: "#7e7e7e",},},},itemStyle: {color: "#bc9200",},},{value: 11,name: "",label: {show: false,},itemStyle: {color: "#a6a6a7",},},],},{type: "pie",center: ["87.5%", "50%"],radius: ["75%", "90%"],data: [{value: 2,name: "Ordered",label: {position: "center",formatter: "{proportion|2/15}" + "\n" + "{title|Ordered}",rich: {proportion: {fontSize: 12,fontFamily: "微软雅黑",fontWeight: 700,color: "#000",lineHeight: 20,},title: {fontSize: 10,fontFamily: "微软雅黑",color: "#7e7e7e",},},//   textStyle: {//     color: "#000",//     fontSize: 12,//   },},itemStyle: {color: "#92d14f",},},{value: 17,name: "",label: {show: false,},itemStyle: {color: "#a6a6a7",},},],},],};

4.折线图（柱状图）双y轴

5.使用echarts5

//安装
npm i echarts5 -S
//引用
import * as echarts5 from "echarts5";
//添加图表后使用
const pieItem = echarts5.init(this.$refs.pieItem);
pieItem.setOption(option);

注意：在vue中使用echarts时，一定得放到mounted生命周期，必须得dom元素挂载后再去渲染，如果是react中则放到useEffect中

6.图形不展示的问题

1.可能是放错了生命周期，例如在vue中，放到了created钩子中，必须放到dom挂载后
2.宽高没有设置，如果不展示，可以先审查元素，如果canvas中的height或width为0也不展示

按需引入等具体配置请