test2_js.js

雪月圣雕

1. (function (){
   
2.     //legend:图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
   
3.     //legend,会在统计图顶部显示不同颜色的按钮。
   
4.     var myChart = echarts.init(document.getElementById('main2'));
   
5.     var option = {
   
6.         title:{text:"年度风险数量对比直方图",left:"center"},
   
7.         legend: {
   
8.             top:"7%",
   
9.             data:['高风险','中风险','低风险']
   
10.         },
    
11.         toolbox: {
    
12.             show :true,
    
13.             feature: {
    
14.                 dataView:{show:true},
    
15.                 restore:{show:true},
    
16.                 magicType:{type:['bar','line']},
    
17.                 saveAsImage:{show:true}
    
18.             }
    
19.         },
    
20.         tooltip: {
    
21.         },
    
22.         xAxis:{
    
23.             type:'category',
    
24.             data: ['2019','2020','2021']   
    
25.         },
    
26.         yAxis:{
    
27.             type:'value'
    
28.         },
    
29.         dataset:{
    
30.             source:[
    
31.                 ['year','高风险','中风险','低风险'],
    
32.                 ['2019',320,120,220],
    
33.                 ['2020',332,132,182],
    
34.                 ['2021',301,101,191],
    
35.             ]
    
36.         },
    
37.         series: [
    
38.             {
    
39.                 //name: '高风险',
    
40.                 type: 'bar',
    
41.                 // 根据stack的值来选取那些柱子堆叠在一起
    
42.                 stack: '风险等级',
    
43.                 color: 'red',
    
44.                 emphasis: {
    
45.                     focus: 'series'
    
46.                 },
    
47.                 //data: [320, 332, 301],
    
48.                 barWidth: '25%'
    
49.             },
    
50.             {
    
51.                 //name: '中风险',
    
52.                 type: 'bar',
    
53.                 stack: '风险等级',
    
54.                 color: 'orange',
    
55.                 emphasis: {
    
56.                     focus: 'series'
    
57.                 },
    
58.                 //data: [120, 132, 101],
    
59.                 barWidth: '25%'
    
60.             },
    
61.             {
    
62.                 //name: '低风险',
    
63.                 type: 'bar',
    
64.                 stack: '风险等级',
    
65.                 color: 'blue',
    
66.                 emphasis: {
    
67.                     focus: 'series'
    
68.                 },
    
69.                 //data: [220, 182, 191],
    
70.                 barWidth: '25%'
    
71.             }
    
72.         ]
    
73.     };
    
74.     //把配置项给实例对象
    
75.     myChart.setOption(option);
    
76. })();
    
77. 
    

复制代码