eacharts 工作中用到的记录

这种第三方的库一般就是只要看文档就可以快速上手，平时也不会去记这些东西，写个文档记下来，用到的时候现看就可以了

https://echarts.apache.org/examples/zh/index.html#chart-type-pie 文档案例，所有的只要把自己网站的数据换上就可以了

这里我写的就是vue中使用的代码

// 调用echarts图 //这个就是在vue的生命周期里执行方法
    onMounted(() => {
        pieFn()
        productCategoryBar()
    })

    // 饼图的方法
    const pieFn = () => {
    // 通过类名 初始化
    //manage-user 结构上一定是先有一个div盒子定义类，注意，如果没有任何错误，那最好给结构外层再套一个盒子，定义上宽度和高度之类的 
        const mu = echarts.init(document.querySelector('.manage-user')) 
        //多个echarts图就在每个图都配下面这个方法
        document.querySelector('.manage-user').setAttribute('_echarts_instance_', '')
        // 设置基本的参数
            mu.setOption({
                title: { //这里就是和标题都相关的，如果想设置位置那就是left top之类的查看文档
                    text: '管理与用户对比图',
                    // subtext: 'Fake Data',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item' //提示框组件相关的行为
                },
                legend: { //图例组件相关的行为,就是左边一列的小块        
                    orient: 'vertical',
                    left: 'left',
                    padding: [20, 20, 20, 20],
                    top:'6%', //这里是小块离上面的距离
                },
                series: [ //这里就是右边看到的大饼图的东西了
                    {
                        // name: 'Access From',
                        top: "14%", //这个是右大饼离上面的距离
                        type: 'pie',
                        radius: '65%',
                        data: piedata,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })
        // 用于echarts响应式
        window.addEventListener('resize', function () {
            mu.resize()
        })
    }

// 柱形图
    const productCategoryBar = async () => {
        const pcb = echarts.init(document.querySelector('.product-category-bar'))
        document.querySelector('.product-category-bar').setAttribute('_echarts_instance_', '')
            pcb.setOption({
                title: {
                    text: "产品类别库存总价图",
                    top: "3%",
                    textStyle: {
                        fontSize: 16
                    },
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: {
                    type: 'category',
                    // 食品类，服装类，鞋帽类，日用品类，家具类，家用电器类，纺织品类，五金类
                    data: category
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: price,
                        type: 'bar',
                        barWidth: 40,
                        colorBy: "data"
                    },
                ]
            })
        window.addEventListener('resize', function () {
            pcb.resize()
        })
    }

echarts常见问题

柱状图legend不出现

①没有配置legend中的data属性
②data的name属性与series的name属性不同

设置legend阴影

        ```js
            itemStyle: {
                opacity: 1,
                shadowColor: "rgba(255, 255, 255, 1)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 0,
                borderCap: "butt"

            }
        ```

饼图内部设置百分比

            ```js
            label: {
                //echarts饼图内部显示百分比设置
                show: true,
                position: "inside", //outside 外部显示  inside 内部显示
                formatter: `{d}%`,
                color: "#ffffff", //颜色
                fontSize: 12 //字体大小
            },
            ```

如何配置echarts响应式

window.addEventListener("resize", function() {
            charts.resize();
        });

多个echarts图就在每个图都配这个方法

document.querySelector('.某某类).setAttribute('_echarts_instance_', '');

如何调整echarts图在框中的位置

使用grid属性

hoverAnimation报错

hoverAnimation在5.0版本已经弃用了，在series中换如下代码

        emphasis:{
            scale: false,
            }

如果再有其它问题先看一下版本的更新

在vue子组件中eacharts 不显示的问题
是因为Dom 加载时机的问题，只需要在父组件里把子组件显示用重新渲染

const aaa = ref(false);
nextTick(() => {
  aaa.value = true;
});
<Datastatics v-if="aaa" />