• echarts入门1【柱状图/饼图】


    这几天刚好用到了echarts,不过项目使用的前端框架非常老了,由此可见echarts兼容性还是hin好的,以后的项目中可能也会遇到很多,准备由浅至深的学习一下echarts,今天先从最基础的开始记录吧~

     什么是echarts?

    Echarts是一款由百度前端技术部开发的,基于Javascript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。

    echarts的初次使用

    初次使用echarts,要引入echarts.js文件

    <script src="echarts.js"></script>

    初始化echarts实例

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

    echarts的示例

    指定图表的配置项和数据,即设置option 

    var option = {
    
    
            title: {  //
                text: '某站点用户访问来源'
            },
            tooltip: {},
            legend: {
                //orient: 'vertical',
                //left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            xAxis: {
                    data: [ { value: '直接访问' },
                        { value: '邮件营销' },
                        { value: '联盟广告' },
                        { value: '视频广告' },
                        { value: '搜索引擎' }
                    ]},
            yAxis: {},
            series: [
                {
                    name: '访问来源',
                    type: 'bar',
                    data:[5,20,36,30,10]
                }
            ]
        };

    echarts参数

       

  • 相关阅读:
    HTML 中的几种空格字符
    css第二天
    css第一天
    html第二天
    html 第一天
    javaScript
    数据类型扩展
    Hello world可能遇到的问题
    卸载安装jdk的步骤与问题
    windows常用快捷键和Dos命令
  • 原文地址:https://www.cnblogs.com/code-klaus/p/8568536.html
Copyright © 2020-2023  润新知