Echarts可视化小案例

最新推荐文章于 2024-06-16 23:43:58 发布

IC-ic.ic

最新推荐文章于 2024-06-16 23:43:58 发布

阅读量654

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_55743273/article/details/123290021

版权

本文介绍了Echarts的可视化使用步骤，包括下载版本、引入库、准备DOM容器、初始化实例及设置配置项。详细展示了饼状图、柱状图、线形图等图表的创建，并提供了代码示例和常见属性解析，如series、xAxis、yAxis和tooltip等。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 '立可得' 数据可视化项目。

该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …

1.下载echarts的任意一个版本

2.引入echarts echarts.min.js

3.准备一个具备大小的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

4.初始化echarts实例对象

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

5.指定配置项和数据(option)

var option = {
   
    xAxis: {
   
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

关注