2021-11-13统计图表 设计(前端)

//需引入Apache ECharts

<!DOCTYPE html>

<html lang='en'>

<head>

    <meta charset='UTF-8'>

    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <meta http-equiv='X-UA-Compatible' content='ie=edge'>

    <title>Document</title>

    <script src="../../../../第三方插件/echarts.js"></script>

</head>

<body>

    <div id="app" style="width: 500px;height: 500px;border: 1px soild black;">

    </div>

</body>

</html>

<script type="text/javascript">

    // 基于准备好的dom,初始化echarts实例

    var myChart = echarts.init(document.getElementById('app'));

// 指定图表的配置项和数据

var option = {

  title: {

    text: 'ECharts 入门示例'

  },

  tooltip: {},

  legend: {

    data: ['销量']

  },

  xAxis: {

    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

  },

  yAxis: {},

  series: [

    {

      name: '销量',

      type: 'bar',

      data: [5, 20, 36, 10, 10, 20]

    }

  ]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容