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. ISP图像处理算法之---Demosaic

    目前市场上主流传感器为Coms传感器,sensor出来的的数据格式为bayer数据格式,这种格式,每个像素点只有三个颜色通道中的一个,如图1所示                             ...

  2. ICA (独立成分分析)

    介绍 独立成分分析(ICA,Independent Component Correlation Algorithm)简介 X=AS X为n维观测信号矢量,S为独立的m(m<=n)维未知源信号矢量 ...

  3. Intellij output 中文乱码

    使用intellij有一段时间了,intellij output中文乱码,每次使用这两点解决,就可以解决乱码问题. 1.修改启动参数 修改安装Intellij目录下的C:\Program Files ...

  4. Android 珍藏(一)

    1,调web浏览器 Uri myBlogUri = Uri.parse("http://xxxxx.com"); returnIt = new Intent(Intent.ACTI ...

  5. react-native 常见问题 及 解决方案

    一.报错 Warning:Navigator:isMounted is deprecated. Instead, make sure to clean up subscriptions and pen ...

  6. redhat 用yum安装的apache、mysql一般默认安装在哪个目录下?

    使用yum安装成功后,使用rpm -qa | grep httpd和rpm -qa | grep mysql查看是否安装成功然后使用rpm -ql httpd和rpm -ql mysql查看安装文件都 ...

  7. HTTP常用的请求头和响应头

    1.请求头 Connection:表示是否需要持久连接.若值为Keep-Alive,就可以利用持久连接的优点,当页面包含多个元素时(例如Applet,图片),显著地减少下载所需要的时间.要实现这一点, ...

  8. pomodoro源码

    有网友问我要pomodoro源码.事实上这个程序非常easy,仅仅是定时器,定时弹出置顶窗体.用c++builder6.0写.放一个TPopupMenu 右键菜单,一个TTrayIcon 一个托盘图标 ...

  9. Nigix加入Hello World模块

    详细资料:<深入理解Nginx> 1.编写第三方模块 建立文件夹hello,里面有两个文件: ngx_http_mytest_module.c #include <ngx_confi ...

  10. 【BIEE】BIEE 11g BI Publisher报表开发实例

    环境准备 JDK下载地址:直接去百度软件中心下载即可 BIPublisher下载地址:http://pan.baidu.com/s/1bpk03Jh 本例子中以win7 32位操作系统为例 1.安装已 ...