Echarts属性基础学习

简介: Echarts属性基础学习

通过标签方式直接引入构建好的 echarts 文件

   <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>


ECharts 准备一个具备高宽的 DOM 容器

<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main"></div>

初始化echarts实例

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'light', {
        renderer: 'canvas',
        width: '800px',
        height: '500px',
        locale: 'EN'
    });


    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: []
        }]
    };


    //01.异步加载数据;
    setInterval(function () {
        myChart.setOption({
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子1"]
            },
            series: [{
                data: random(6, 20, 800)
            }]
        });
    }, 1000);
 //02.异步加载数据;
    option.series[0].data = random(6, 20, 800);
    option.xAxis.data = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子1"];
    myChart.setOption(option);


lockdatav Done!

相关文章
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
438 0
|
4月前
Echarts visualMap属性记录
这篇文章是关于ECharts中visualMap属性的详细记录。文中首先定义了visualMap的作用,即进行数据到视觉元素的映射。接着,通过一系列详细的配置参数,如类型、显示控制、数据范围、样式和格式化工具等,介绍了如何配置连续型和分段型visualMap组件。最后,作者通过具体代码示例,说明了如何将这些配置应用于实际的ECharts图表中,以实现数据的视觉编码效果。
186 0
Echarts visualMap属性记录
|
8月前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
166 0
Echarts tooltip配置项的属性 图表悬浮框
Echarts tooltip配置项的属性 图表悬浮框
|
定位技术
【ECharts学习】—实现中国地图
【ECharts学习】—实现中国地图
【ECharts学习】—实现我的第一个图表
【ECharts学习】—实现我的第一个图表
|
JSON 前端开发 JavaScript
从零开始学习React-五分钟上手Echarts折线图(十)
从零开始学习React-五分钟上手Echarts折线图(十)
204 0
ECharts分段型视觉映射组件的属性修改
ECharts分段型视觉映射组件的属性修改
69 0
echarts 仪表盘三分钟上手及属性修改示例
echarts 仪表盘三分钟上手及属性修改示例
191 0
|
前端开发
【前端统计图】echarts实现属性修改
【前端统计图】echarts实现属性修改
72 0
下一篇
开通oss服务