02 echarts 入门示例

此处和官网给出教程一样。可参考官网教程

https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
<-- 引入 echarts 文件  -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
<h1>Echarts</h1>
<-- 为其准备一个容器放置 -->
<div  id='main' style="width: 600px;height: 400px">

</div>

<script type="text/javascript">
//初始化echarts实例
    var myCharts = echarts.init(document.getElementById('main'));
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
//渲染图表
    myCharts.setOption(option);
</script>
</body>
</html>

 

 

posted @ 2020-05-06 15:03  深海心  阅读(202)  评论(0)    收藏  举报