ECharts3.0折线图------------手把手教你每一项的样式设计
来源:互联网 发布:三维人体解剖软件 编辑:程序博客网 时间:2024/05/19 16:19
刚到公司接到一个几乎全是图表的项目,之前从没接触过EChart,不得以慢慢学
现在把我的经验贡献出来
代码及详细解释如下:
<div id="main" style="width: 250px;height:200px;"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { tooltip : { //提示框 trigger: 'axis', //触发类型(坐标轴触发) alwaysShowContent:false, //是否永远显示提示框的内容 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色 textStyle:{ //提示框浮层的文本样式 }, }, calculable : true, xAxis : [ { type : 'category', name:'(月)', //X轴名称单位 nameLocation:'end', //名称的位置 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:0, //名称与X轴的距离 boundaryGap: true,//坐标的刻度是否在中间 min:'3',//坐标轴刻度最小值 max:'dataMax', //坐标轴刻度的最大值 axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisTick:{ //坐标轴刻度相关设置 length:'0' //我把长度设置成0了 }, axisLabel:{ //坐标轴刻度标签 margin:7, //刻度标签与轴线之间的距离 textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, data : ['3','4','5','6','7','8','9','10'] } ],//X轴设置 yAxis : [ { type : 'value', //类型数值轴 name:'(人)', //坐标轴名称 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:3, //名称与Y轴的距离 axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisLabel:{//坐标轴标签相关设置,距离颜色等 margin:7, //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 }, }, splitLine:{ //坐标轴分隔线。默认数值轴显示,类目轴不显示。 show:false } } ], grid:{ //直角坐标系内绘图网格 left:36 //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft }, series : [ //系列列表 { name:'人', //系列名称 用于tooltip的显示 type:'line', data:[360, 500, 400, 600, 530, 840, 540,350], itemStyle:{ //折线拐点的样式 normal:{ color:'#20aefc', //折线拐点的颜色 } }, lineStyle:{ //线条的样式 normal:{ color:'#20aefc', //折线颜色 } }, areaStyle:{ //区域填充样式 normal:{ //线性渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#b1e3fe' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], false) } }, markPoint : { //图标标注 data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></div>
0 0
- ECharts3.0折线图------------手把手教你每一项的样式设计
- ECharts3.0折线图------------手把手教你每一项的样式设计
- ECharts3.0饼状(环形图)------------手把手教你每一项的样式设计
- ECharts3.0饼状(环形图)之二------------手把手教你每一项的样式设计
- ECharts3.0饼状 柱状退(环形图)------------手把手教你每一项的样式设计
- ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
- ECharts3.0饼状(多个饼状图)之三------------手把手教你每一项的样式设计
- 基于SpringMVC框架使用ECharts3.0实现折线图,柱状图,饼状图,的绘制(上篇)
- Echarts3.0+JavaWeb+Mysql实现饼图,折线图,柱状图
- 不用派生CTreeCtrl不用繁琐的过程 教你如何让CTreeCtrl的每一项有ToolTip提示
- 从大一写到大四,手把手教你如何度过大学的每一年!
- echarts3的简单实践(饼图、柱形图、折线图、地图+散点图)
- 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍
- 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍
- 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍
- 手把手教你实现折线图之------安卓最好用的图表库hellocharts之最详细的使用介绍
- 为什么Android总是事无巨细地告诉你应用索取的每一项权限?
- nginx status 每一项的含义
- python多线程与单线程之间的差距
- Android APT(编译时代码生成)最佳实践
- kcf跟踪算法实例整理
- swift中的get方法和oc的区别
- 198. House Robber
- ECharts3.0折线图------------手把手教你每一项的样式设计
- 制作 OpenStack Linux 镜像
- python 文件相关的命令
- java 对象池(GenericObjectPool)优化——commons-pool-1.6.jar
- session与cookie的介绍和两者的区别之其相互的关系
- Linux_Service—vsftp_Service
- VTK 长方体隐藏视觉后面的三根线
- 三、装饰者模式
- WIN32 opengl三角形绘制