echarts的简单使用

最新推荐文章于 2024-06-28 18:13:57 发布

ruantianqing

最新推荐文章于 2024-06-28 18:13:57 发布

阅读量77

点赞数

分类专栏：前端工具

本文链接：https://blog.csdn.net/ruantianqing/article/details/113096243

版权

前端工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 引入

官网：https://echarts.apache.org/zh/index.html

可以直接下载，也可以使用npm下载

下载js文件之后引入
在这里插入图片描述

2 使用

<body>
    <!-- 准备一个容器div放置图表，会按照容器的大小绘图 -->
    <div id="demo1" style="width: 600px;height:400px;"></div>

    <!-- 使用javascript绘制图表 -->
    <script>
        // 初始化绘制图表的echarts实例,传入图表容器
        var myChart = echarts.init(document.querySelector('#demo1'))

        // 指定图表的配置，用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等
        var option = {
            title: { text: '第一个echarts demo1' },
            tooltip: {}, // 提示框,
            legend: {
                data: ['人数']
            },
            // 直角坐标系 X 轴
            xAxis: {
                data: ['vue', 'react', 'angular', 'jquery']
            },
            // y轴，如果是一个空对象会默认显示数字
            yAxis: {},
            series: [
                {
                    name: "人数",
                    type: 'bar',
                    data: [2000, 1500, 500, 2200]
                }
            ]
        }
        // 对实例对象设置配置
        myChart.setOption(option)
    </script>
</body>

效果图
在这里插入图片描述

vue中使用

<script>
import * as echarts from 'echarts'
export default {
	name: 'App',
	mounted() {
		// 初始化绘制图表的echarts实例,传入图表容器
        var myChart = echarts.init(document.querySelector('#demo2'))

        // 指定图表的配置，用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等
        var option = {
            title: { text: '第一个echarts demo2' },
            tooltip: {}, // 提示框,
            legend: {
                data: ['人数']
            },
            // 直角坐标系 X 轴
            xAxis: {
                data: ['vue', 'react', 'angular', 'jquery']
            },
            // y轴，如果是一个空对象会默认显示数字
            yAxis: {},
            series: [
                {
                    name: "人数",
                    type: 'bar',
                    data: [2000, 1500, 500, 2200]
                }
            ]
        }
        // 对实例对象设置配置
        myChart.setOption(option)
	}

}
</script>

效果如上图

ruantianqing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts的简单使用

1 引入官网：https://echarts.apache.org/zh/index.html可以直接下载，也可以使用npm下载下载js文件之后引入2 使用<body>  <div id="demo1" style="width: 600px;height:400px;"></div> 
复制链接

扫一扫

专栏目录