在操作E-chart时需要根据需求改变颜色和属性

图1:

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [, , , , , , ],
type: 'line',
smooth: true
}]
};

图2:

解决方案:

 option = {
//标题
title: {
text: title,
//标题样式
textStyle: {
fontWeight: 'normal',
color: '#fff',
},
//top: 20,
},
xAxis: {
type: 'category',
//x轴字体颜色
axisLine: {
lineStyle: {
color: '#fff'
}
},
data: ['0822','0823','0824','0826','0827','0828']
},
yAxis: {
type: 'value',
//y轴颜色
axisLine: {
lineStyle: {
color: '#fff'
}
},
//y轴设置为百分比
axisLabel: {
formatter: '{value}%',
},
//坐标轴内线的样式
splitLine: {
lineStyle: {
color: '#666',
//type:'dashed'虚线
}
}
},
series: [{
//折线上数字
label: {
normal: {
show: true,
position: 'top',
formatter:'{c}%'
}
},
// 折线颜色
itemStyle: {
normal: {
color: '#33CCFF',
lineStyle: {
color: '#33CCFF'
}
}
},
data:['78.57','50','80','93.33','92.86','100'],
type: 'line',
smooth: true
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}

E-chart 点击事件

myChart.on('click', function (params) {
});

Echart 改变X轴、Y轴、折线的颜色和数值的更多相关文章

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

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

  2. Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. electron-vue 开发环境搭建(Windows环境)

    1.安装 Node.js,一切都基于这个.安装完成后,终端输入 node -v 验证. 2.建立自己的项目目录,然后进入目录. 安装 vue-cli ,终端输入 npm install -g vue- ...

  2. uwp ListView列表滑动特效

    在看过一篇文章 WPF自定义控件之列表滑动特效 PowerListBox  http://www.cnblogs.com/ShenNan/p/4993374.html#3619585 实现了滑动的特效 ...

  3. Hessian——轻量级远程调用方案

    Hessian是caucho公司开发的一种基于二进制RPC协议(Remote Procedure Call protocol)的轻量级远程调用框架.具有多种语言的实现,但用的最多的当然是Java实现 ...

  4. Python中进程和线程的总体区别

    Num01–>线程 线程是操作系统中能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位. 一个线程指的是进程中一个单一顺序的控制流. 一个进程中可以并发多条线程,每条线程并行 ...

  5. Mutual Training for Wannafly Union #6 E - Summer Trip(并查集)

    题目链接:http://www.spoj.com/problems/IAPCR2F/en/ 题目大意: 给m个数字代表的大小,之后n组数据,两两关联,关联后的所有数字为一组,从小到大输出组数以及对应的 ...

  6. liunx相关指令

    修改网卡命名规范 ​ a 如何进入到救援模式 修改网卡 1.修改配置文件名称 /etc/sysconfig/network-scripts/
 名称为:ifcfg-xxx 2.修改配置文件内的 dev ...

  7. 【原创】Team Foundation Server 域环境迁移

    先说下此片博客的上下文:部门所在的业务被集团出售,因此我们所有的计算机和服务器都得重新命名,退出当前域加入新公司的域.对于PC和其他服务器,目前不存在太大问题.但是对于Team Foundation ...

  8. 剑指offer四十六之孩子们的游戏(圆圈中最后剩下的数,约瑟夫环问题)

    一.题目 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  9. (转)MySQL优化系列

    原文:http://blog.csdn.net/jack__frost/article/details/71194208 数据库,后端开发者必学,而且现在以MySQL居多.这个系列将系统化MySQL一 ...

  10. 【优化】bigpipe技术

    一.什么是bigpipe Bigpipe是Facebook工程师提出了一种新的页面加载技术. BigPipe是一个重新设计的基础动态网页服务体系.大体思路是,分解网页成叫做Pagelets的小块,然后 ...