百度echarts简单使用

最新推荐文章于 2024-09-02 15:44:28 发布

吃龙虾的霸王龙

最新推荐文章于 2024-09-02 15:44:28 发布

阅读量461

点赞数 1

文章标签： html css3 javascript echarts

本文链接：https://blog.csdn.net/zp_ddup/article/details/114929262

版权

快速上手ECharts

第一步
引入echarts所需要的文件包即echarts.min.js文件可以去此处下载
第二步
为自己的echarts图标在html页面中准备一个容器即

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

不要忘记给容器设置宽高和引入echarts.min.js文件！！！
第三步
可以去echarts官网选择相应的图例点击此处跳转直接替换option即可，以柱状图为例

<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
					    xAxis: {
					        type: 'category',
					        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					    },
					    yAxis: {
					        type: 'value'
					    },
					    series: [{
					        data: [120, 200, 150, 80, 70, 110, 130],
					        type: 'bar',
					        showBackground: true,
					        backgroundStyle: {
					            color: 'rgba(180, 180, 180, 0.2)'
					        }
					    }]
					};
        // 将复制的option加入到自己的容器中。
        myChart.setOption(option);
    </script>