Echarts样式

Echarts设置样式如下

1. <div id="main" style="width: 250px;height:200px;"></div>
2.     <script type="text/javascript">
3.         var myChart = echarts.init(document.getElementById('main'));
4.         // 指定图表的配置项和数据
5.         var option = {
6.             tooltip : { //提示框
7.                 trigger: 'axis', //触发类型(坐标轴触发)
8.                 alwaysShowContent:false, //是否永远显示提示框的内容
9.                 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色
10.                 textStyle:{ //提示框浮层的文本样式
11.  
12.  
13.                 },
14.             },
15.             calculable : true,
16.             xAxis : [
17.                 {
18.                     type : 'category',
19.                     name:'(月)', //X轴名称单位
20.                     nameLocation:'end', //名称的位置
21.                     nameTextStyle:{ //名称的样式
22.                         color:'#999',
23.                         fontSize:'12px'
24.                     },
25.                     nameGap:0, //名称与X轴的距离
26.                     boundaryGap: true,//坐标的刻度是否在中间
27.                     min:'3',//坐标轴刻度最小值
28.                     max:'dataMax', //坐标轴刻度的最大值
29.                     axisLine:{//坐标轴线条相关设置(颜色等)
30.                         lineStyle:{
31.                             color:'#ccc'
32.                         }
33.                     },
34.                     axisTick:{ //坐标轴刻度相关设置
35.                         length:'0' //我把长度设置成0了
36.                     },
37.                     axisLabel:{ //坐标轴刻度标签
38.                         margin:7, //刻度标签与轴线之间的距离
39.                         textStyle:{
40.                             color:"#999", //坐标轴刻度文字的颜色
41.                             fontSize:'12px' //坐标轴刻度文字的大小
42.                         }
43.                     },
44.                     data : ['3','4','5','6','7','8','9','10']
45.  
46.                 }
47.             ],//X轴设置
48.             yAxis : [
49.                 {
50.                     type : 'value', //类型数值轴
51.                     name:'(人)', //坐标轴名称
52.                     nameTextStyle:{ //名称的样式
53.                         color:'#999',
54.                         fontSize:'12px'
55.                     },
56.                     nameGap:3, //名称与Y轴的距离
57.                     axisTick:{ //坐标轴刻度相关设置
58.                         length:'0' //我设置成0了
59.                     },
60.                     axisLine:{//坐标轴线条相关设置(颜色等)
61.                         lineStyle:{
62.                             color:'#ccc'
63.                         }
64.                     },
65.                     axisLabel:{//坐标轴标签相关设置,距离颜色等
66.                         margin:7,
67.                         //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c
68.                         textStyle:{
69.                             color:"#999", //坐标轴刻度文字的颜色
70.                             fontSize:'12px' //坐标轴刻度文字的大小
71.                         },
72.                     },
73.                     splitLine:{ //坐标轴分隔线。默认数值轴显示，类目轴不显示。
74.                         show:false
75.                     }
76.                 }
77.             ],
78.             grid:{ //直角坐标系内绘图网格
79.                 left:36 //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft
80.             },
81.             series : [ //系列列表
82.                 {
83.                     name:'人', //系列名称 用于tooltip的显示
84.                     type:'line',
85.                     data:[360, 500, 400, 600, 530, 840, 540,350],
86.                     itemStyle:{ //折线拐点的样式
87.                         normal:{
88.                             color:'#20aefc', //折线拐点的颜色
89.                         }
90.                     },
91.                     lineStyle:{ //线条的样式
92.                         normal:{
93.                             color:'#20aefc', //折线颜色
94.                         }
95.                     },
96.                     areaStyle:{ //区域填充样式
97.                         normal:{
98.                             //线性渐变
99.                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
100.                                 offset: 0, color: '#b1e3fe' // 0% 处的颜色
101.                             }, {
102.                                 offset: 1, color: '#fff' // 100% 处的颜色
103.                             }], false)
104.                         }
105.                     },
106.                     markPoint : { //图标标注
107.                         data : [
108.                             {type : 'max', name: '最大值'},
109.                             {type : 'min', name: '最小值'}
110.                         ]
111.                     },
112.                     markLine : {
113.                         data : [
114.                             {type : 'average', name: '平均值'}
115.                         ]
116.                     }
117.                 }
118.  
119.             ]
120.         };
121.         // 使用刚指定的配置项和数据显示图表。
122.         myChart.setOption(option);
123.     </script>
124. </div>