echarts

 
    <div id="main" style="background:rgba(92, 25, 25, 0.075);width: 700px;height: 350px;border:1px solid red;"></div>
    <script src="./node_modules/echarts/dist/echarts.js"></script>
    <script>
        let mainDom = document.getElementById('main')
        let mychart = echarts.init(mainDom)
        let option = {
            /* 提示工具 */
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            /* 图例 */
            legend: {
                data: ['销量', '库存']
            },
            /*  grid控制的是整个图的位置 不包括文本
            想包括文本使用containLabel: true */
            grid: {
                left: '5%',
                right: '5%',
                bottom: '5%',
                top: 30,
                /* containLabel图的总空间会包含文字 */
                containLabel: true
            },
            xAxis: {
                /* 这里设置了value 不会出现文字 只会出现数字 */
                type: "category",
                splitLine: false,
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'red' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        type: "dashed"
                    }
                },
                axisTick: false,
                /* 设置了type:"category" 就实现了显示文字 */
                type: "value",

            },
            dataZoom:{
                type:"slider",
                /* 起始点 */
                start:0,
                /* 展示的终点 */
                end:50
            },
            series: [
                {
                    name: '销量',
                    type: 'pie',
                    center: ['25%', '50%'],
                    /* radius 第一个值表示圆心的大小
                    第二个值表示圆的大小 */
                    radius: [20, 90],
                    color: 'red',
                    /* 折线图圆润 */
                    smooth: true,
                    /* 去除节点 */
                    symbol: 'none',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'green' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'blue' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    data: [{
                        name: "衬衫",
                        value: 5,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'red' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'blue' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },

                    }, {
                        name: "羊毛衫",
                        value: 20
                    }, {
                        name: "雪纺衫",
                        value: 36
                    }, {
                        name: "裤子",
                        value: 10
                    }, {
                        name: "高跟鞋",
                        value: 10
                    }, {
                        name: "袜子",
                        value: 20
                    }]
                },
                {
                    name: '库存',
                    type: 'pie',
                    /* center 代表两张图的距离 第一个表示x轴 
                    第二个表示y轴 */
                    center: ['75%', '50%'],
                    radius: [40, 90],
                    color: 'blue',
                    data: [{
                        name: "衬衫",
                        value: 15
                    }, {
                        name: "羊毛衫",
                        value: 10
                    }, {
                        name: "雪纺衫",
                        value: 26
                    }, {
                        name: "裤子",
                        value: 30
                    }, {
                        name: "高跟鞋",
                        value: 40
                    }, {
                        name: "袜子",
                        value: 10
                    }]
                }
            ]
        };
        /* 你点击每一块都有每一块的信息 */
        mychart.on('click', function (data) {
            console.log(data)
        })
        mychart.setOption(option)
    </script>
</body>