Echarts图表

如何使用Echarts完成一个图表

官网地址：https://echarts.apache.org/zh/    //详细aip请参考官网
加入js库：<script src="https://cdn.jsdelivr.net/npm/echarts@5.1.1/dist/echarts.min.js"></script>
我这里是网络地址，需要网络环境

1、第一步创建一个容器
<div id="main" style="width: 600px;height:400px">
</div>
2、使用echarts.init(document.getElementById("elem"))创建一个对象
定义一个option的配置 ，其中配置已对象格式配置
var option = {
tittle:‘图表顶部标题’,
textStyle:{‘标题样式配置’},
left:"“标题在图表中的位置”  ‘center’'bottom等
}，
tooltip:{
 trigger:"item"，  //当鼠标滑过时显示这个tips，
 formatter:function(arg){
 //tips中的数据设置，回调函数是一个对象，关于这个当前点击的对象的详细信息
    return  arg.name+"\n"+arg.value+'元'+"\n"+arg.percent+"%"
 }，
 //通用配置多种图形之间的转换
    // `toolbox:{
        //     feature:{
        //         magicType:{
        //             type:['bar','line']
        //         }
        //     }
        //
        // },`
        //通用配置图例
     legend:{
            orient:'vertical', // 配置图例垂直显示
            x:'left' 配置图例靠左显示
        },
 
 }  //通用配置【图表数据详细信息】

//图表核心配置其中数据格式是一个数组
  series: [{  //图表核心配置
            name: '销量',  //配置图表名称
            type: 'pie', // 配置图表类型 我这里是饼状图  
            data:  pieDate, //数据格式为键值对
            label: {
                show:  true, //显示文字的配置 默认为true  // 是否在图表上显示文字
                formatter:function (arg) //  // 图表数据文字
                {
                    return arg.name+"\n"+arg.value+'万元'+"\n"+arg.percent+"%"
                },

            },
            radius:'60%'
        },
        ]

最后将设置配置到对象上
 // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);

tooltip

图例