示例里工作一般情况是够用了,更复杂的可以查询教程:

title 官方解说:http://echarts.baidu.com/option.html#title

坐标相关: X轴:http://echarts.baidu.com/option.html#xAxis

坐标相关: Y轴:http://echarts.baidu.com/option.html#yAxis

表格部分:http://echarts.baidu.com/option.html#grid

<script>
function getChartsLine() { var myChart = echarts.init(document.getElementById('progress'),'macarons'); var option = {
title: {
text: '工程折线图', //主标题
textStyle:{
color:'#0DB9F2', //颜色
fontStyle:'normal', //风格
fontWeight:'normal', //粗细
fontFamily:'Microsoft yahei', //字体
fontSize:14, //大小
align:'center' //水平对齐
},
subtext:'副标题', //副标题
subtextStyle:{ //对应样式
color:'#F27CDE',
fontSize:14
},
itemGap:7
},
grid:{ //显示数据的图表位于当前canvas的坐标轴
x:50,
y:55,
x2:50,
y2:60,
borderWidth:1
},
tooltip: {
trigger: 'axis'
},
legend: {
data:["计划完成","实际完成"]
},
toolbox: {
show: true,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
},
yAxis: {
type: 'value', //默认以千分位显示,不想用的可以在这加一段
axisLabel : { //调整左侧Y轴刻度, 直接按对应数据显示
show:true,
showMinLabel:true,
showMaxLabel:true,
formatter: function (value) {
return value;
}
}
},
series: [
{
name:"计划",
type:'line',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 300, 2.3],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
},
{
name:"实际",
type:'line',
data:[0, 0, 37, 0, 0, 15, 3036, 5572, 0, 0, 0, 0],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};
myChart.setOption(option);
} getChartsLine();
</script>

修改后:

EChart 标题 title 样式,x轴、y轴坐标显示,调整图表位置等的更多相关文章

  1. vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题

    1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...

  2. highcharts 不显示X轴 Y轴 刻度

    xAxis: { tickWidth:0,        //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0,        //设置坐标宽度 la ...

  3. 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)

    今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进. <!DOCTYPE html> <html lang="en&quo ...

  4. d3.js多个x轴y轴canvas柱状图

    最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对比较困难,一旦掌握了核心思想,不断熟悉AP ...

  5. PhoneGap 加速计 api 获取加速计 x 轴 y 轴 z 轴信息

    一.PhoneGap 加速计 Accelerometer 对象介绍 1.主要方法 accelerometer.getCurrentAcceleration 获取当前设备在 x,y,z 轴上的加速度信息 ...

  6. Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置

    // 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...

  7. JS逆向实战6-- x轴 y轴 过点触验证码

    点触验证码是一种常见的反爬手段 解决方案有两种:一种是直接解决,这需要深度学习机器学习等图像处理技术,以大量的数据训练识别模型,最终达到模型足矣识别图片中的文字提示和应该点击的区域之间的对应关系. 这 ...

  8. svg 动画 透明度 放大缩小 x轴Y轴

    参考链接:https://www.cnblogs.com/Chrimisia/p/6670303.html vue 中封装svg:http://www.cnblogs.com/Jiangchuanwe ...

  9. 绕X 轴 Y轴 Z轴旋转的结果

    void warp_perspect_3_angle(cv::Mat face, float roll, float yaw, float pitch) { cv::Mat face_img = fa ...

随机推荐

  1. PHP的垃圾回收机制之引用计数

    1,介绍 php的垃圾回收机制(GC)是在PHP5之后出现的,而在PHP5.3版本之前使用的都是“引用计数”的方式.实现引用计数的实质就是在每个内存对象中都有一个计数器,当内存对象被变量引用时,计数器 ...

  2. Prometheus学习笔记(2)Prometheus部署

    目录 Prometheus的安装配置启动 Prometheus的安装配置启动 1.Prometheus二进制安装 Prometheus下载链接:https://prometheus.io/downlo ...

  3. 《linux就该这么学》课堂笔记04 常用命令cat、mor...tar、find

    本节命令汇总 命令 说明 格式 常用参数 实例 备注 cat 查看纯文本文件(内容较少) cat [选项] 文件名称 -n 显示行号 cat -n install-setup-ks.cfg 查看ins ...

  4. nginx重试机制proxy_next_upstream

    nginx作为反向代理服务器,后端RS有多台服务器,上层通过一定机制保证容错和负载均衡. nginx的重试机制就是容错的一种 官方链接:http://nginx.org/en/docs/http/ng ...

  5. C++学习(12)—— 运算符重载

    运算符重载概念:对已有的运算符重新进行定义,赋予其另一种功能,以适应不同的数据类型 1.加号运算符重载 作用:实现两个自定义数据类型相加的运算 #include <iostream> #i ...

  6. css 布局 flex

    cursor 设置鼠标放上去后的形状 visability 设置是否可见 flex 详见这篇文章https://developer.mozilla.org/zh-CN/docs/Learn/CSS/C ...

  7. httprunner学习3-extract提取token值参数关联(上个接口返回的token,传给下个接口请求参数)

    前言 如何将上个接口的返回token,传给下个接口当做请求参数?这是最常见的一个问题了. 解决这个问题其实很简单,我们只需取出token值,设置为一个中间变量a,下个接口传这个变量a就可以了.那么接下 ...

  8. Linux创建目录和文件的默认权限设置

    这两天,项目中使用jenkins自动构建系统时遇到了在Linux中创建目录和文件的权限问题,临时的解决办法是在脚本中增加了chmod赋权限命令; 偶然想到Linux应该是可以设置默认权限的,故学习了一 ...

  9. php析构函数什么时候调用?

    析构函数何时被调用 析构函数在下边3种情况时被调用: 对象生命周期结束,被销毁时: 主动调用delete :(推荐学习:PHP编程从入门到精通) 对象i是对象o的成员,o的析构函数被调用时,对象i的析 ...

  10. tcpdump 筛选抓包

    安装 $ sudo yum install tcpdump 常用参数 -i interface: 设置抓取的网卡名(可以使用 -i any 抓取所有网卡的数据包) tcpdump -i eth0 -D ...