【高级课程笔记】—— Echarts入门&常用组件

最新推荐文章于 2024-03-18 21:10:14 发布

柳柳Elena

最新推荐文章于 2024-03-18 21:10:14 发布

阅读量380

点赞数

文章标签： python 数据可视化可视化 js tooltip

本文链接：https://blog.csdn.net/qq_34235864/article/details/120858364

版权

官网

一、浏览器画图方式有两种

canvas ：点阵图，缩放失真，适合图形数量非常大的图表
svg：矢量图，缩放不失真，适合图形数量较少的图表

二、echarts 的绘图步骤

建立dom 容器
引入 ECharts
实例化echarts
建立图表配置项
显示图表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速上手</title>
    <style>
        #main{
            height: 500px;
        }
    </style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="../js/echarts.min.js"></script>
<script>
    /*基于准备好的dom，初始化echarts实例
    * echarts.init(dom)
    * */
    const myChart=echarts.init(document.getElementById('main'));

    /*指定图表的option 配置项和数据
    * title 标题 {}
    *   text 主标题
    * xAxis x轴 {}
    *   data 类目数据
    * yAxis y轴 {}
    * series 系列列表 [系列，...]
    *   系列
    *       type 图表类型
    *       data 数据，与xAxis.data 相对应
    * */
    const option={
        title:{
            text:'主标题'
        },
        xAxis: {
            data:['html','css','js']
        },
        yAxis: {},
        series:{
            type:'bar',
            data:[30,20,40]
        }
    };

    /*使用刚指定的配置项和数据显示图表
    * setOption(option)
    * */

最低0.47元/天解锁文章

柳柳Elena

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【高级课程笔记】—— Echarts入门&常用组件

官网一、浏览器画图方式有两种canvas ：点阵图，缩放失真，适合图形数量非常大的图表 svg：矢量图，缩放不失真，适合图形数量较少的图表二、echarts 的绘图步骤建立dom 容器引入 ECharts 实例化echarts 建立图表配置项显示图表<!DOCTYPE html><html lang="en"><head>...
复制链接

扫一扫