webSong

文件 :密码:xewx

官方文档教程地址:https://www.hcharts.cn/docs/basic-color

上手容易,api友好,尽管也有不尽人意的地方,但是它很适合我当前的项目,如果想要更好的效果,花点时间去研究一下echarts.js还是很好的。

代码:

 1 //容器
 2 <div id=\'main\'></div>
 3 //脚本
 4 $("#main").highcharts({
 5     chart: {
 6         type: \'line\'
 7     },
 8     credits: {
 9         enabled: false // 禁用版权信息
10     },
11     title: {
12         text: "模拟的"
13     },
14     xAxis: {
15         categories: [\'05-31\',\'06-31\',\'07-31\',\'08-31\',\'09-31\',\'10-31\']
16     },
17     yAxis: [{
18         lineWidth: 1,
19         title: {
20             text: \'收益(元)\'
21         }
22     }, {
23         title: {
24             text: \'收盘价(元)\'
25         },
26         lineWidth: 1,
27         opposite: true
28     }, {
29         title: {
30             text: \'大盘\'
31         },
32         lineWidth: 1,
33         opposite: true
34     }],
35     series: [{
36         data: [10,20,15,33],
37         yAxis: 2,
38         name: \'大盘\',
39         color: "#9B59B6"
40     }, {
41         data: [10,25,30,53],
42         yAxis: 1,
43         name: \'收盘价\',
44         color: "#3498DB"
45     }, {
46         data: [10,20,15,33,66,78],
47         name: \'收益(红盈利|绿亏损)\',
48         color: "#E74C3C",
49         yAxis: 0,
50         zones: [{
51             value: 0,
52             color: \'#2ECC71\'
53         }]
54     }]
55 });

代码-柱状图,为了找修改颜色,我可是花了时间的。

 1 //画图主桩
 2 $(\'#zhu\').highcharts({
 3     chart: {
 4         type: \'column\',
 5     },
 6     title: {
 7         text: \'平均值\'
 8     },
 9     xAxis: {
10         categories: [
11             \'一月\',
12             \'二月\',
13             \'三月\',
14             \'四月\',
15             \'五月\',
16             \'六月\',
17             \'七月\',
18             \'八月\',
19             \'九月\',
20             \'十月\',
21             \'十一月\',
22             \'十二月\'
23         ],
24         crosshair: true
25     },
26     yAxis: {
27         min: 0,
28         title: {
29             text: \'量 (mm)\'
30         }
31     },
32     plotOptions: {
33         column: {
34             colorByPoint:true
35         }
36     },
37     series: [{
38         name: \'北京\',
39         data: [
40             {
41                 y:49.9,
42                 color:"#ff0000"}]
43     }]
44 });

 

分类:

技术点:

相关文章:

  • 2021-11-30
  • 2021-12-03
  • 2022-01-09
  • 2022-12-23
  • 2021-08-25
  • 2022-01-02
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-14
  • 2021-11-15
  • 2021-12-13
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案