search

aromameng / aromameng.github.io

个人博客
https://aromameng.github.io/
0 stars 1 forks source link

echarts 笔记 #15

Open aromameng opened 5 years ago

aromameng commented 5 years ago

react中加载

如果用了某个属性却没有反应，可以看看是不是有引入相应的组件

import echarts from "echarts/lib/echarts";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/chart/pie";

echarts 饼图的label 显示不全，被遮挡住这种情况

可以调整 labelLine 的 length和length2来微调图例与饼图的距离 也可以通过微调startAngle 属性，调整角度，让一些被遮挡的显示完全 如果这两个都解决不了，那目前暂时没有找到什么好的解决方案

aromameng commented 5 years ago

柱状图分类叠加而不是分开

关键在 series 中的 "stack" 属性，如果分类中都设置为同一值，则会自动叠加 参考demo https://gallery.echartsjs.com/editor.html?c=xSJJXiE1Wx

aromameng commented 5 years ago

图表自适应

使用resize() 方法重新渲染

window.addEventListener('resize', this._resizeFn)

_resizeFn = () =>{
        const $el = document.getElementById(this.props.el)
        echarts.init($el).resize();
}
aromameng commented 3 years ago

改变echarts中tooltip的宽度以及换行

formatter: (p)=>{
      const text = data[p.dataIndex].violationAction
      return `<div class="echarts_tooltip_div">${p.name}：<br />${p.value}，   ${p.percent}%  <br /><span>${text}</span></div> `
}