Echarts样式Echarts设置样式如下
1. <div id="main" ></div>
2.    <script type="text/javascript">
3. var myChart = echarts.ElementById('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: aphic.LinearGradient(0, 0, 0, 1, [{
100.                                offset: 0, color: '#b1e3fe' // 0% 处的颜⾊
101.                            }, {
102.                                offset: 1, color: '#fff' // 100% 处的颜⾊
textstyle
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。