echart 图表自定义样式
initChart: function (id) {
this.charts = echarts.init(document.getElementById(id))
this.charts.setOption({
xAxis: {
type: 'category',
data: ['11号', '12号', '13号', '14号', '15号'],
color: ['#DDDDDD'],
name:'4月',
show: true,
nameTextStyle: {
color: '#636363', // 坐标轴名称样式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
}
},
axisTick: { //去除刻度线
show: false
},
axisLabel: {
show: true, //坐标轴的文字是否显示
textStyle: {
color: '#323232', //坐标轴上的字体颜色
fontSize:'12' // 坐标轴字体大小
}
},
},
yAxis: {
type: 'value',
name:'金额(元)',
show: true,
nameTextStyle: {
color: '#636363', // 坐标轴名称样式
left:'0'
},
axisLine: {
lineStyle: {
color: '#DDDDDD',
width: 1
},
textStyle: {
color: '#323232', //x轴上的字体颜色
fontSize:'11' // x轴字体大小
}
},
axisTick: { //去除刻度线
show: false
},
axisLabel: {
show: true, //坐标轴的文字是否显示
textStyle: {
color: '#323232', //坐标轴上的字体颜色
fontSize:'12' // 坐标轴字体大小
}
},
splitLine:{
show:true ,
lineStyle:{
color:'#DCDCDC',
width: 1
}
},
min:0, //坐标轴最大值
max:700, //坐标轴最大值
splitNumber:10, //间隔线间距 },
series: [{
data: [320, 240, 280, 500, 290],
type: 'line',
color: '#F40000',
symbol: 'circle',//折线点设置为实心点
symbolSize: 9, //折线点的大小
symbol:'circle',
smooth:false,
itemStyle:{
normal:{
// color:'#ddd',
lineStyle:{
width:1,
type:'solid', //'dotted'虚线 'solid'实线
color:'#F40000',
},
label : { //折线上的数据
show: true,
position: 'top',
color:'#636363'
}, }
}
}]
});
echart 图表自定义样式的更多相关文章
- vue 使用 echart ,自定义样式案例
1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echa ...
- 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做 ...
- Ueditor上传图片后自定义样式类名
Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...
- Android RatingBar 自定义样式
Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...
- WPF CheckBox 自定义样式
WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...
- Dialog详解(包括进度条、PopupWindow、自定义view、自定义样式的对话框)
Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框) Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...
- 超详细的Xcode代码格式化教程,可自定义样式
为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangF ...
- WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...
- WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...
随机推荐
- JS中的柯里化及精巧的自动柯里化实现
一.什么是柯里化? 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术.这个技术由 C ...
- ASIHttpRequest请求时的默认编码
在ASIHttpRequest.m文件 中的 - (id)initWithURL:(NSURL *)newURL方法中找到 [self setDefaultResponseEncoding:NSISO ...
- [转载]linux 清除系统cached
FROM: http://cqfish.blog.51cto.com/622299/197230 linux 清除系统cached top查看系统内存使用情况 Mem: 16432180k ...
- 2017.8.23 postgresql的外键
1.增加/删除外键的语法 ALTER TABLE t_permission ADD CONSTRAINT fkey FOREIGN KEY (fd_resid) REFERENCES t_resour ...
- git学习——查看提交历史
git log可以查看提交历史: 用-p选项展开显示每次提交的内容差异,用-2则仅显示最近两次的更新:git log -p -2 在-p选项后面使用--word-diff选项进行单词层面的对比.这其中 ...
- setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS学习(项目中遇到的错误1)
1.[AppModel copyWithZone:]: unrecognized selector sent to instance 0x7ffda9f4cf70 *** Terminating ap ...
- 打造你的前端神器-webstorm11
说起前端编辑器,用过dw,sublime,hbuilder,webstorm也不陌生,之前的版本8有用过一下,但是觉得比sublime重量太多,但是随着后来用node的开始,发现需要打造个web前端神 ...
- JavaScript AJAX原生写法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- C中的C文件与h文件辨析
简单的说其实要理解C文件与头文件(即.h)有什么不同之处,首先需要弄明白编译器的工作过程,一般说来编译器会做以下几个过程: 1.预处理阶段 2.词法与语法分析阶段 .编译阶段,首先编译成纯 ...