echarts的实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <style>
       
    </style>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            //设置柱状图的颜色
            color: ['green','#2f4554', '#61a0a8'],
            title: {
                text: '第一个 ECharts 实例'
            },
            tooltip: {},
            legend: {
                data:[{
                    name: '系列1',
                    // 强制设置图形为圆。
                     icon: 'circle',
                    // 设置文本为红色
                     textStyle: {
                     color: 'green'
                     }
                }],

            },
            xAxis: {
                axisTick: {
                //隐藏x轴的刻度
                show:false
                 },
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
            },
            yAxis: {
                type: 'value',
          axisLine:{
                //y轴线消失
                show:false
           },
          axisTick: {
                //y轴坐标点消失
                show:false
           },
           //不显示y轴的值
           axisLabel : {
            formatter: function(){
                  return "";
            },
        },

    },
            series: [{
                name: '销量',
                type: 'bar',
                //设置柱状图的宽度
                barWidth : 30,//柱图宽度
               
                data: [500, 400, 306, 300, 300, 305, 200, 136, 110, 100, 120,80],
                //设置柱形图顶部显示数据
                itemStyle: {
                   normal: {
                       label: {
                           show: true,      //开启显示
                           position: 'top', //在上方显示
                           textStyle: {     //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }
                   }
               }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
posted @ 2022-01-28 11:29  এএ᭄念卿এএ᭄  阅读(163)  评论(0)    收藏  举报