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 图表自定义样式的更多相关文章

  1. vue 使用 echart ,自定义样式案例

    1.vue 安装 echart 库 npm install echarts --save 2.vue代码 引入 let echarts = require("echarts/lib/echa ...

  2. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  3. Ueditor上传图片后自定义样式类名

    Ueditor是百度的一个富文本插件,如果使用者会前端语言的话,那适用性就很好,特别是现在移动端纵横的情况.但往往使用者并不懂编程,要让他们使用前端语言的话是不可能的,这就需要我们在开发时就定义好整个 ...

  4. Android RatingBar 自定义样式

    Android RatingBar 自定义样式 1.先定义Style: <style name="RadingStyle" parent="@android:sty ...

  5. WPF CheckBox 自定义样式

    WPF 自定义样式.CheckBox <Style x:Key="EmptyCheckBox" TargetType="CheckBox"> < ...

  6. Dialog详解(包括进度条、PopupWindow、自定义view、自定义样式的对话框)

    Dialog详解(包括进度条.PopupWindow.自定义view.自定义样式的对话框)   Android中提供了多种对话框,在实际应用中我们可能会需要修改这些已有的对话框.本实例就是从实际出发, ...

  7. 超详细的Xcode代码格式化教程,可自定义样式

    为什么要格式化代码 当团队内有多人开发的时候,每个人写的代码格式都有自己的喜好,也可能会忙着写代码而忽略了格式的问题. 在之前,我们可能会写完代码后,再一点一点去调格式,很浪费时间. 有了ClangF ...

  8. WPF自定义控件与样式(4)-CheckBox/RadioButton自定义样式

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: Che ...

  9. WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...

随机推荐

  1. hive 行转列,列转行

    行转列: concat_ws 列转行: explode

  2. android 小技巧

    1. 模拟器横坚屏切换 ctrl + F11, ctrl + F12

  3. 转: 苹果APNS的说明

    转: http://toutiao.com/a6276578687162040578/?tt_from=weixin&utm_campaign=client_share&app=new ...

  4. nonlocal(非局部变量)---python 3.x 新增关健词

    Python里只有2种作用域:全局作用域和局部作用域.全局作用域是指当前代码所在模块的作用域,局部作用域是指当前函数或方法所在的作用域.其实准确来说,Python 3.x引入了nonlocal关键字, ...

  5. Step 2---有关Github的几个问题

    1.取得项目的Git仓库的方式 第一种是在现存的目录下,通过导入所有文件来创建新的 Git 仓库. 要对现有的某个项目开始用 Git 管理,只需到此项目所在的目录,执行: $ git init 初始化 ...

  6. TCP/IP详解 卷一(第十八章 TCP连接的建立和终止)

    建立连接 建立一个TCP连接时会发生下述情况 1.客户TCP发送一个SYN(同步)分节,它告诉服务器将在(待建立)连接中发送的数据的初始序列号. 2.服务器确认(ACK)客户的SYN,同时自己也得发送 ...

  7. iOS代码覆盖率测试工具

    基于lcov-1.11的:CodeCoverage4iOS   阅读目录 环境准备 Xcode工程配置 构建并安装程序 收集代码覆盖率 过滤结果 合并多个Coverage.info⽂件⽣成覆盖率报告: ...

  8. jetty学习小结

    1.什么是jetty? 开源HTTP服务器和Servlet引擎,是web应用的容器,同tomcat类似.由于其轻量灵活的特性,很多知名产品也应用了它,如maven.eclipse.hadoop.spa ...

  9. different between method and function

    A method is on an object. A function is independent of an object. For Java, there are only methods. ...

  10. bootstrap-ui-datetime-picker插件学习

    GitHub:https://github.com/Gillardo/bootstrap-ui-datetime-picker 准备 安装:bower install --save bootstrap ...