画图工具除了echarts我使用highcharts

文件 :密码:xewx

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

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

代码:

 1 //容器
 2 
'main'>
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 });

 

转载于:https://www.cnblogs.com/webSong/p/7091192.html

你可能感兴趣的:(画图工具除了echarts我使用highcharts)