option =

{
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// backgroundColor: '#6a7985',
// },
// },
position(pos: any, params: any, dom: any, rect: any, size: any) { // 鼠标移入时显示的框子的定位
// 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
return {
top: -10,
[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
};
},
},
dataZoom: [  //x轴是否可以滑动
{
type: 'inside',
start: 50, //从50%开始显示
end: 100, //到100%的位置 
filterMode: 'empty',
},
],
color: ['#d77b09', '#54f0fd', '#296f04'],  //想要设置折线图的文字颜色(还是图小图标一起改动?),必须要在这里写
legend: {
data: ['名称1', '名城2', {  //这里可以单独设置图例的配置
name: '名城3',
textStyle: {
fontSize: 8,
fontWeight: 'bolder',
color: '#296f04',
},
}],
itemWidth: 6, //图例小图标的宽度,宽度和高度都为0时,小图标不显示
itemHeight: 6, //图例小图标的高度
textStyle: {
fontSize: 8, // 设置图例中文字大小
color: ['#d77b09', '#54f0fd', '#296f04'],  //设置图例文字的颜色,如果是有折线图,必须再在外面写个color,如果这里和外面写了都没效果,就单独设置图标中的data设置
},
itemGap: 0,
top: -6, },
// toolbox: {
// feature: {
// saveAsImage: {},
// },
// },
grid: {  //这个是用来设置echarts图标的位置和其他设置
left: '-5%',
// right: '4%',
bottom: '11%',
width: '110%',
top: '20%',
containLabel: true, //一般都带上这个,否则x,y轴的刻度值会被截取掉
},
xAxis: [  //x轴的设置
{
type: 'category',
boundaryGap: true, //是否将x轴的刻度显示在中间位置,false表示从0这个位置开始(最边上)
data: data,  //x轴的数据
axisTick: {  //是否显示刻度线
show: false,
},
axisLabel: {  //相关轴上的刻度值的设置,show:false,表示不显示轴上的刻度值
textStyle: { //刻度值的字体样式设置
color: '#e9ecee',
},
fontSize: 8,
margin: 2,  //刻度值离轴线多远的距离
},
},
],
yAxis: [
{
type: 'value',
// min: 0,
// max: 300, //设置轴的最大值和最小值,一般不规定,可自适应
show: false,  //设置Y轴不显示(轴线不显示)
splitNumber: 4, // 控制刻度标签的数量
axisTick: { //轴线的小刻度线
show: false, // y轴的小刻度线。这里是不显示
},
axisLabel: { //设置刻度值
show: false, //不显示刻度值,如果不显示,下面的刻度值设置就可以不用写了
textStyle: {
// color: '#e9ecee',
},
fontSize: 8,
margin: 5,
},
axisLine: { //设置轴线的配置
show: false,
lineStyle: { //轴线的线条颜色
color: '#9999ae',
},
},
splitLine: {  //设置网格线,写在哪个轴就是哪个轴的网格线
show: false,
lineStyle: {
type: 'dotted',
// color: ['#aaa', 'red'], //设置网格线的颜色,可单独设置
color: '#4c4a74',
},
},
},
],
series: [
{
name: '名称1',
type: 'line',
stack: '总量',
symbol: 'none', //取消折线上的小圆点
smooth: true, //使线条顺滑
itemStyle: { //折线的样式设置
normal: {
lineStyle: { //折线线条的设置
color: '#d77b09',
},
},
},
areaStyle: { //折线的区域样式设置
normal: {
color: new LinearGradient( //区域颜色设置
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
data: data,
},
{
name: '名称2',
type: 'line',
stack: '总量',
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: '#54f0fd',
},
},
},
areaStyle: {
normal: {
color: new LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
data: data,
},
{
name: '名称3',
type: 'line',
stack: '总量',
smooth: true,
itemStyle: {
normal: {
color: '296f04', //折线上的小圆点颜色设置
lineStyle: {
color: '#296f04',
// width: 1, //折线的线条宽度
},
},
},
areaStyle: {
normal: {
color: new LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
label: { //在折线上显示相对应的数值
normal: {
show: true,
position: 'top', //数值的位置
distance: 0,  //数值距离折线的距离
fontSize: 8, //数值的字体大小
color: '#296f04', //数值的颜色
},
},
data: data,
}, ],
};

echarts相关属性设置(1)折线图篇的更多相关文章

  1. echarts相关属性设置(2)--折线图和柱状图的结合使用

    type:bar和line的组合 option = { { tooltip: { trigger: 'axis', axisPointer: { // type: 'shadow' }, // lab ...

  2. echarts相关属性设置(3)环状图

    option = { grid: { left: '3%', top: '0%', // height: 500, right: '30%', containLabel: true, }, legen ...

  3. UILabel的相关属性设置

    在iOS编程中UILabel是一个常用的控件,下面分享一下UILabel的相关属性设置的方法. 很多学习iOS6编程都是从storyboard开始,用到UILabel时是将控件拖到storyboard ...

  4. iOS开发笔记--UILabel的相关属性设置

    在iOS编程中UILabel是一个常用的控件,下面分享一下UILabel的相关属性设置的方法. 很多学习iOS6编程都是从storyboard开始,用到UILabel时是将控件拖到storyboard ...

  5. echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了?

    用 echarts 时遇到了一个奇奇怪怪的问题. 这是一张折线图. 本来这个图是有数字显示的. series : [ { name:'搜索引擎', type:'line', stack: '总量', ...

  6. 深入浅出ECharts系列 (二) 折线图

    深入浅出ECharts系列(二) 目标 本次教程的目标是实现“折线图堆叠”折线,实现结果如图: 2. 准备工作 a)         首先下载ECharts插件,你可以根据自己的实际需求选择你想要下载 ...

  7. echarts图表属性设置

    原地址:http://blog.csdn.net/she_lover/article/details/51448967theme = { // 全图默认背景 // backgroundColor: ‘ ...

  8. echarts入门基础,画折线图

    注意:一定要自己引入echarts库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  9. 设置TextBlock默认样式后,其他控件的Text相关属性设置失效问题

    问题: 定义了默认TextBlock样式后,再次自定义下拉框 or 其他控件 ,当内部含有TextBlock时,设置控件的字体相关样式无效,系统始终使用TextBlock设置默认样式 解决方案: 为相 ...

随机推荐

  1. 传递一个父id返回所有子id的用法,可用于删除父级以下的所有子级

    先在common文件夹建立一个function.php文件,然后写一个递归函数,传递一个父id返回所有子id,如下: function getChildrenId($node,$pid){ $arr= ...

  2. 【Effective C++】资源管理

    资源:动态分配的内存.文件描述器.互斥锁.图形界面中的字型与笔刷.数据库连接以及网络sockets等,无论哪一种资源,重要的是,当你不再使用它时,必须将它还给系统. 条款13:以对象管理资源 当我们向 ...

  3. 数组/字符串/ Math / 方法示例

    数组 Array concat  数组的合并 <script> var north = ["北京","上海","深圳"]; va ...

  4. 后台管理微服务(二)——docker的使用

    1. docker概述 1.1 Docker是什么 Docker 是软件工业的集装箱技术 Docker 是一个容器引擎,docker提供了一套完整的容器解决方案. Docker 是一个能将开发的程序自 ...

  5. include vector 编译出错VC++

    error C2665: “operator new” : 5个重载中没有一个可以转换参数1(从“const char [71]”类型)这个错误是怎么回事啊,搜索了整个项目好像没有可疑的new操作阿. ...

  6. 物体position:absolute后设置left:50%发生的有趣小事

    今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽 ...

  7. html5学习笔记(1)-新标签

    最近在做的项目中用到了Html5的部分标签,经师父提醒感觉自己用section的次数多的有点过分,今天去找了一篇HTML5新标签的使用方法,特意贴了上来,感谢原作者的分享,方便以后自己使用~~~ HT ...

  8. POJ3279 Fliptile —— 状态压缩 + 模拟

    题目链接:http://poj.org/problem?id=3279 Fliptile Time Limit: 2000MS   Memory Limit: 65536K Total Submiss ...

  9. 自定义标签(客户化jsp标签)

    客户化jsp标签技术是在jsp1.1版本中才出现的,他支持用户在jsp文件中自定义标签,这样可以使jsp代码更加简单,这些可重用的标签能够处理复杂的逻辑运算和事物或定义jsp网页的输出内容和格式. 创 ...

  10. poj3181【Dollar Dayz】

    做完这道题,心里五味陈杂,明明是最水的一道题,我却做了最长的时间. 题意是求用1-k的和表示n的方案数. 显然是个计数dp,但我不会.思考半小时未果. 然后找尹鹏哲,他给我讲了个错的dp方程,结果调试 ...