Echarts画条形图 

 1 <html>
 2 <head>
 3     <meta name="viewport" content="width=device-width" />
 4     <title>条形图</title>
 5     @*echarts画图必须要引用的*@
 6     <script src="~/Scripts/echarts.min.js"></script>
 7 </head>
 8 <body>
 9     @* 画图要用的空间 *@
10        <div id="divEcharts" style="width:800px;height:600px;"></div>
11 </body>
12 </html>
13 <script type="text/javascript">
14     option = {
15         color: ['#3398DB'],
16         tooltip : {  //提示信息
17             trigger: 'axis', //axis轴对称
18             axisPointer : {            // 坐标轴指示器，坐标轴触发有效
19                 type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
20             }
21         },
22         grid: { //网格
23             left: '3%',
24             right: '4%',
25             bottom: '3%',
26             containLabel: true //把y轴的值显示出来
27         },
28         xAxis : [  //X轴的数据
29             {
30                 type : 'category',
31                 data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
32                 axisTick: {
33                     alignWithLabel: true
34                 }
35             }
36         ],
37         yAxis : [  //Y轴的网格已值为准
38             {
39                 type : 'value'
40             }
41         ],
42         series : [
43             {
44                 name:'直接访问', //提示中的信息
45                 type:'bar', //图的类型 bar条形 
46                 barWidth: '60%', //每个条形的宽度比例
47                 data:[10, 52, 200, 334, 390, 330, 220] //Y轴数据
48             }
49         ]
50     };
51 
52 
53     //初始化echarts实例
54     var myChart = echarts.init(document.getElementById('divEcharts'));
55     //使用制定的配置项和数据显示图表
56     myChart.setOption(option);
57     
58 </script>

 

posted @ 2019-05-09 11:23  无~道  阅读(3457)  评论(0)    收藏  举报