博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echart折线图系列一:折线图基本配置
阅读量:6380 次
发布时间:2019-06-23

本文共 2271 字,大约阅读时间需要 7 分钟。

  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:[]             }           ]     };

     

转载于:https://www.cnblogs.com/juicy-initial/p/9259262.html

你可能感兴趣的文章
百度不收录原因分析——Spider抓取篇
查看>>
Ubuntu Server 上安装 Jexus
查看>>
浏览器渲染原理及解剖浏览器内部工作原理
查看>>
dubbo连接zookeeper注册中心因为断网导致线程无限等待问题【转】
查看>>
Spring Boot项目配置RabbitMQ集群
查看>>
bash 交互与非交互
查看>>
怎么提高自身技术
查看>>
北京游泳馆
查看>>
Mac 安卓模拟器打开 ONS
查看>>
完全卸载Oracle 11g教程
查看>>
Oracle调整表空间大小——ORA-03297: 文件包含在请求的 RESIZE 值以外使用的数据
查看>>
二叉树(一)
查看>>
函数的递归
查看>>
JavaScript之将JS代码放在什么位置最合适
查看>>
【“零起点”--百度地图手机SDK】如何使用离线地图?
查看>>
深拷贝与浅拷贝复习
查看>>
各种参数的响应时间
查看>>
SQL Server 索引重建脚本
查看>>
23:LVS客户端配置脚本案例
查看>>
Android播放本地视频
查看>>