guopengfa
发布于 2020-05-25 / 1008 阅读 / 0 评论 / 0 点赞

echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts_view</title>
    <script src = "echarts.js"></script>
</head>
<body>
    <div id="view" style="width:800px;height: 600px;"></div>
    <script type="text/javascript">
        var myecharts = echarts.init(document.getElementById("view"))
        var option = {
            tooltip:{
              trigger:'axis',
              axisPointer:{
                  type:"line"
              }
            },
            title:{
                text:"入门了哦"
            },
            tooltip:{},
            legend:{
                data:["销量"]
            },
            //xAxis: {
             //   data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            //},
            xAxis:{
                data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis:{},
            series:[{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]

        }
        var lin = echarts.init(document.getElementById("view"))
        var options1 = {
            tooltip:{
                trigger:"axis",
                axisPointer:{
                    type:"shadow"
                },
                legend:{
                    data:"测试"
                },
                xAxis:{
                    data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis:{},
                series:[{
                    name: '测试',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
        }
        myecharts.setOption(option)
        lin.setOption(options1)
        myecharts.avoidLabelOverlap(lin)
    </script>
</body>
</html>

评论