一、echart简介

  Echarts (http://echarts.baidu.com/)是百度公司出品的,算是百度不可多得的良心之作。要彻底掌握Echarts,你需要掌握一点前端开发的知识,这些知识也是你花几周的时间就可以学会的(这里需要你掌握一点html、css、javascript的知识)
二、入门案例

(注:一定要将容器放在js代码前面,[我也是经过实践后发现的])

1、代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 100%;height:450px;"></div>
</body>
<script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));         // 指定图表的配置项和数据
       var option = {
           barWidth:30,//条形的宽的为30
           tooltip: {},
           legend: {//说明
                    //orient: 'vertical', //说明显示在的位置所在
                    // center: 'center ',//说明的位置居中显示 默认居中横排显示
                    data:['期中', '期末'],//数据说明
bottom: 'bottom',
                    },
           xAxis: {//X轴上的内容
                    type : 'category',
                    axisLabel:{
                        //横坐标上的文字斜着显示 文字颜色 begin
                             interval:0,
                             rotate:45,
                             margin:10,
                             textStyle:{color:"#ec6869" }
                        //横坐标上的文字换行显示 文字颜色end
                             },
                    type : 'category',
                    data: ["语文","数学","英语","物理","化学"]
                  },
            yAxis: {//Y轴上的内容
                     type : 'value'
                   },
title:{
text: '霸下',//主标题文本,'\n'指定换行
subtext: '2019年秋 实验中学学生成绩 ',
left: 'center',
},
            series: [
                //第一条数据 begin
                    {
                    type: 'bar',//Echart 柱状图(bar)
                    name:'期中',
                    data: [60, 70, 55, 33, 12],
                        //柱状条颜色的设置为#eb6768 begin
                        itemStyle: {
                                normal: {
                                color: '#eb6768',
                                shadowBlur: 2,
                                shadowColor: 'rgba(3, 3, 4, 0.5)'
                                        }
                                    }
                        //柱状条颜色的设置为#eb6768 end
                    },
                 //第一条数据 end
                
                 //第二条数据 begin    
                    {
                    type: 'bar',
                    name:'期末',
                    data: [63, 65, 35, 18, 24],
                    //柱状条颜色的设置为#eb6768 begin
                    itemStyle: {
                            normal: {
                                color: '#3b8ede',
                                shadowBlur: 2,
                                shadowColor: 'rgba(3, 3, 4, 0.5)'
                                  }
                               }
                    //柱状条颜色的设置为#eb6768  end    
                  }
               //第二条数据 end    
               ]
             };
                // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</html>

2、效果

echart 库 初始的更多相关文章

  1. echart初体验 动态加载数据

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. vue 使用 echart ,自定义样式案例

    1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echa ...

  3. TortoiseSVN安装使用(转)

    TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...

  4. TortoiseSVN安装使用

    TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...

  5. 【Vegas原创】SVN的搭建及安装使用

    中文手册:http://tortoisesvn.net/docs/nightly/TortoiseSVN_zh_CN/index.html 所需程序: 1,TortoiseSVN  http://so ...

  6. git 创建branch分支

    开发者user1 负责用getopt 进行命令解析的功能,因为这个功能用到getopt 函数,于是将这个分支命名为user1/getopt.(1)确保是在开发者user1的工作区中cd /home/j ...

  7. SVN使用(二)

    TortoiseSVN是windows平台下Subversion的免费开源客户端. 一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要 ...

  8. git 创建branch分支【转】

    转自:http://www.cnblogs.com/jackluo/p/3499731.html 开发者user1 负责用getopt 进行命令解析的功能,因为这个功能用到getopt 函数,于是将这 ...

  9. TortoiseSVN是windows平台下Subversion的免费开源客户端。

    一般我们都是先讲讲服务器的配置,然后再讲客户端的使用,但是在TortoiseSVN上,却可以反过来.因为,如果你的要求不高,只是想在本机,或者是可信任的局域网络中使用SVN版本控制,可以不需要安装SV ...

随机推荐

  1. Python 之并发编程之线程上

    一.线程概念 进程是资源分配的最小单位 线程是计算机中调度的最小单位 多线程(即多个控制线程)的概念是,在一个进程中存在多个控制线程,多个控制线程共享该进程的地址空间,相当于一个车间内有多条流水线,都 ...

  2. Tensorflow机器学习入门——AttributeError: module 'scipy.misc' has no attribute 'toimage'

    这个bug的解决办法: import cv2 # scipy.misc.toimage(image_array).save('cifar10_data/raw/%d.jpg' % i) cv2.imw ...

  3. Java连载66-数组的两种初始化方式

    一.数组 1.数组中存储元素的类型是统一的,每一个元素在内存中所占用的空间大小是相同的,知道数组的首元素的内存地址,要查找的元素只要知道下标,就可以快速的计算出偏移量,通过首元素内存地址加上偏移量,就 ...

  4. updataxml报错注入

    // take the variables//接受变量 // //也就是插入post提交的uname和passwd,参见:https://www.w3school.com.cn/sql/sql_ins ...

  5. color转成image对象

    .h //颜色转换成图片 + (UIImage *)imageFromColor:(UIColor *)color; .m //颜色转换成图片 + (UIImage *)imageFromColor: ...

  6. 使用pyinstaller打包.py程序

    使用pyinstaller打包.py程序 例如打包D:/Desktop 目录下的 filename.py 文件 打开 cmd 将目录切换至 D:/Desktop 输入命令 pyinstaller -F ...

  7. day4-1深入理解对象之创建对象

    深入理解对象 之创建对象: 工厂模式: 工厂模式虽然解决了创建\多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型) 工厂模式问题:那就是识别问题,因为根本无法 搞清楚他们到底是 ...

  8. C# 读取和写入txt文件

    读取: 1.使用StreamReader读取文件,然后一行一行的输出 StreamReader sr = new StreamReader(path,Encoding.Default); String ...

  9. HDU1029 简单DP

    "OK, you are not too bad, em... But you can never pass the next test." feng5166 says. &quo ...

  10. Java面向对象编程 -1.2

    类与对象简介 类是某一类事物的共性的抽象概念 而对象描述的是一个具体的产物 类是一个模板,而对象才是类可以使用的实例,先有类再有对象 在类之中一般都会有两个组成: 成员属性(Filed) :有些时候为 ...