1. 引入echart插件
2. 页面上准备一个容器：<div id="box" style="height:400px;width: 800px;padding: 20px"></div>
3. 获取id，初始化：var myChart = echarts.init(document.getElementById("box"));
4. 定义基本配置信息

    var option = {
   
            // 标题
   
            title: {
   
                text: '',
   
                subtext: ''
   
            },
   
            tooltip: {
   
                trigger: 'axis'，
    　　           backgroundColor: 'rgba(36, 49, 67, 0.9)',
   
            },
   
            //图例名
   
            legend: {
   
                data:['']
   
            },
   
            grid: {
   
                left: '3%',   //图表距边框的距离
   
                right: '4%',
   
                bottom: '3%',
   
                containLabel: true
   
            },
   
            //工具框，可以选择
   
            toolbox: {
   
                feature: {
   
                    saveAsImage: {}
   
               }
   
            },
   
            //x轴信息样式
   
            xAxis: {
   
                type: 'category',
   
                boundaryGap: false,
   
                data: [''],
   
                //坐标轴颜色
   
                axisLine:{
   
                    lineStyle:{
   
                        color:'red'
   
                    }
   
               },
   
                //x轴文字旋转
   
                axisLabel:{
   
                    rotate:30,
   
                    interval:0
   
                },
   
            },
   
            yAxis : [
   
                {
   
                    type : 'value',
   
                    axisLabel : {
   
                        formatter: '{value} 人'
   
                    }
   
                }
   
            ],
   
            series: [
   
                //虚线
   
                {
   
                    name:'',
   
                    type:'line',
   
                    symbolSize:4,   //拐点圆的大小
   
                    color:['red'],  //折线条的颜色
   
                    data:[],
   
                    smooth:false,   //关键点，为true是不支持虚线的，实线就用true
   
                    itemStyle:{
   
                        normal:{
   
                            lineStyle:{
   
                                width:2,
   
                                type:'dotted'  //'dotted'虚线 'solid'实线
   
                            }
   
                        }
   
                    }
   
                },
   
                //实线
   
                {
   
                    name:'',
   
                    type:'line',
   
                    symbol:'circle',
   
                    symbolSize:4,
   
                    itemStyle:{
   
                        normal:{
   
                            color:'red',
   
                            borderColor:'red'  //拐点边框颜色
   
                        }
   
                    },
   
                    data:[]
   
                }
   
            ]
   
        };

最新文章

1. 分布式的Id生成器
2. ElasticSearch中的简单查询
3. 【codevs1690】开关灯 线段树 区间修改+区间求和（标记）
4. [BS-22] Objective-C中nil、Nil、NULL、NSNull的区别
5. extern &quot;C&quot; 和 DEF 文件.
6. 【英语】Bingo口语笔记(59) - 穿着的表达
7. C++ Primer 学习笔记_35_STL实践与分析（9）--map种类（在）
8. 对Extjs中store的多种操作
9. 个人作业2：APP案例分析
10. lesson - 15 Linux系统日常管理4
11. Zabbix（一）
12. mysql 命令总结 每天5个
13. Django中提供的6种缓存方式
14. [IDE - Eclipse] JSP报错:The superclass “javax.servlet.http.HttpServlet” was not found on the Java Build Path
15. hdu 5972---Regular Number(字符串匹配)
16. Solr中的q与fq参数的区别
17. Openstack运维指南文档整理
18. 手撕vue-cli配置——webpack.prod.conf.js篇
19. MongoDB分片集群环境搭建记录
20. ballerina 学习 三十一 扩展开发（二）

热门文章

1. Linux-负载均衡LVS
2. nginx安装访问
3. 解决Navicat远程连接MySQL出现 10060 unknow error
4. Gym - 101606G Gentlebots
5. filebeat+logstash配置
6. js常用数据类型（Number,String,undefined,boolean） 引用类型（ function,object,null ）,其他数据类型（ 数组Array，时间Date，正则RegExp ），数组与对象的使用
7. Spring MVC 使用问题与解决--HTTP Status 500 - Servlet.init() for servlet springmvc threw exception
8. 程序设计-理解java继承-遁地龙卷风
9. EmbeddedSolrServer的使用与solor6.3.0的使用
10. 前端基础之jQuery