Echarts柱状图，饼状图，折线图案例

最新推荐文章于 2024-09-28 22:46:23 发布
最新推荐文章于 2024-09-28 22:46:23 发布
阅读量3.6k 收藏 2
点赞数
分类专栏： # Echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tototuzuoquan/article/details/70344721
版权 
 

在使用Echarts之前需要做的工作是引入Echarts所需的js：
 
<script type="text/javascript" src="${scriptsPath}/echarts/echarts.min.js" charset="utf-8"></script>
 
定义要在那个div区域显示图形：
 
 <div class="similarity-sentence" id="similarity-sentence"></div>
 
        
 
 <div class="unqualified-sentences" id="unqualified-sentences"></div>
 
下面的id就是是上面div的id
 
distributionDiagram:function(id,topSimilarSentenceInfo) {
 
                            var sentenceIndexArray = new Array();
 
                            var sentenceDataArray = new Array();
 
                            var colorListArray = new Array();
 
                            //获取句子的数量
 
                            if(docCheck.isNotBlank(topSimilarSentenceInfo)) {
 
                                     var sentenceNum = topSimilarSentenceInfo.length;
 
                                     for(var i = 0; i < sentenceNum; i++) {
 
                                               sentenceIndexArray.push((i + 1) + '');
 
                                               sentenceDataArray.push(100);
 
                                               
 
                                               if(docCheck.isNotBlank(topSimilarSentenceInfo[i])) {
 
                                                        //表示的是progress-bar-danger，高度重合，危险型
 
                          if(topSimilarSentenceInfo[i].similarityValue >= 70) {
 
                                    colorListArray.push('#ED6F87');
 
                          }
 
                          //表示的是progress-bar-warning,表示的警告类型的
 
                          else if(topSimilarSentenceInfo[i].similarityValue >= 40 && topSimilarSentenceInfo[i].similarityValue < 70) {
 
                                    colorListArray.push('#E1B465');
 
                          } 
 
                          //表示的是progress-bar-success这种颜色的，表示是的安全类型的
 
                          else if(topSimilarSentenceInfo[i].similarityValue < 40) { 
 
                                    colorListArray.push('#8ACD84');
 
                          }
 
                                               } else {
 
                                                        colorListArray.push('#8ACD84');
 
                                               }
 
                                     }
 
                            }
 
                            
 
                        //用于初始化这个图形
 
                            var myChart = echarts.init(document.getElementById(id));
 
                            
 
                            var option = {
 
                                     title:{text:'句子相似度分布图'},
 
                                color: ['#3398DB'],
 
                                tooltip : {
 
                                    trigger: 'axis',
 
                                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
 
                                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 
                                    }
 
                                },
 
                                grid: {
 
                                    left: '3%',
 
                                    right: '4%',
 
                                    bottom: '3%',
 
                                    containLabel: true
 
                                },
 
                                xAxis : [
 
                                    {
 
                                        type : 'category',
 
                                        data : sentenceIndexArray,
 
                                        axisTick: {
 
                                            alignWithLabel: true
 
                                        },
 
                                        axisLabel:{
 
                                                show:true,
 
                                                textStyle:{
 
                                                         fontSize:7
 
                                                }
 
                                        }
 
                                    }
 
                                ],
 
                                yAxis : [
 
                                    {
 
                                        show : true,
 
                                        axisLabel : {
 
                                            show:false
 
                                        },
 
                                        axisTick : {
 
                                                show:false
 
                                        },
 
                                        type : 'value'
 
                                    }
 
                                ],
 
                                series : [
 
                                    {
 
                                        name:'句子平均相似度',
 
                                        type:'bar',
 
                                        barWidth: '100%',
 
                                        tooltip:{
 
                                            trigger : 'item',
 
                                            formatter : function(params) {
 
                                             var sentenceIndex = parseInt(params.name);
 
                                             var rate = topSimilarSentenceInfo[sentenceIndex -1].similarityValue;
 
                                                return '句子序号:' + params.name + '<br/>平均相似度:' + rate + '%';
 
                                            }
 
                                        },
 
                                        data:sentenceDataArray,
 
                                        itemStyle: {
 
                                            normal: {
 
                                                color: function(params) {
 
                                                    // build a color map as your need.
 
//                                                var colorList = [
 
//                                                   '#ED6F87','#ED6F87','#ED6F87','#ED6F87','#ED6F87',
 
//                                                   '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84',
 
//                                                   '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84',
 
//                                                   '#8ACD84','#8ACD84','#8ACD84','#8ACD84','#8ACD84'
 
//                                                ];
 
                                                    return colorListArray[params.dataIndex]
 
                                                }
 
                                            }
 
                                        }
 
                                    }
 
                                ]
 
                            };
 
                            
 
                            // 为echarts对象加载数据 
 
                       myChart.setOption(option);  
 
                   },
 

 
 

运行后的效果如下：
 


 

 

柱状图，饼状图，折线图案例：
 

/*
 
 * name       :tuzuoquan
 
 * mail       :email@qq.com
 
 * date       :2016/11/27
 
 * version    :1.0
 
 * description:
 
 * CopyRight (C) 2016-11-21
 
 */
 
(function($){
 
         $.studentIndex = {
 
                   /*
 
        * 获得json数据；数据格式查看jsonData中的json文件
 
        * url: ajax 地址
 
        * params type obj {}  配置返回数据的多少，day week month
 
        *callback 用于实例化echart 的回调函数
 
        *id 用于放置echart表的dom元素 id 不用加“#”
 
        * name; 表盘的名字自定义
 
        * */
 
        getData:function(url,params,id,callback){
 
            //console.log("url = " +url);
 
                            $.ajax({
 
                type: "POST",
 
                url: url,
 
                //async: false,
 
                dataType: 'json',
 
                contentType: 'application/json; charset=utf-8',
 
                data: params,
 
                success: function(data) {
 
                                         //console.log(data);
 
                    callback(id,data);
 
                }
 
            });
 
        },
 
        /**
 
         * 初始化成图标
 
         * id     :表示要放置柱状图的div的id
 
         * json   :表示json数据的内容
 
         */
 
                   initBarChart:function(id,json) {
 
           var legendDataArr = json.legendDataArr;
 
           var xAxisDataArr = json.xAxisDataArr;
 
           var seriesDataArr = json.seriesDataArr;
 
           var title = json.title;
 
           
 
           // 基于准备好的dom，初始化echarts图表
 
                       var myChart = echarts.init(document.getElementById(id)); 
 
         
 
                       var option = {
 
                       title:{
 
                                         show:true,
 
                                         text:title,
 
                                         textStyle:{
 
                                             fontSize:15,
 
                                             fontWeight:'normal'
 
                                               }
 
                       },
 
                       tooltip: {
 
                               show: true
 
                           },
 
                           legend: {
 
                              orient : 'horizontal',
 
                       x : 'center',
 
                       y : 'bottom',
 
                               data:[title/*,'月检测量2'**/]
 
                           },
 
                           xAxis : [
 
                               {
 
                                   type : 'category',
 
                                   data : ["12月","1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月"]
 
                               }
 
                                               //,
 
                                               //{
 
                                               //    type : 'category',
 
                                               //    data : ["12月1","1月1","2月1","3月1","4月1","5月1","6月1","7月1","8月1","9月1","10月1","11月1"]
 
                                               //}
 
                           ],
 
                           yAxis : [
 
                               {
 
                                   type : 'value'
 
                               }
 
                           ],
 
                           series : [
 
                               {
 
                                   "name":"月检测量",
 
                                   "type":"bar",
 
                                   "data":[20, 40, 80, 100, 120, 80,95,70,65,55,70,80]
 
                               }
 
                           ]
 
                       };
 
                 
 
                       option.legend.data = legendDataArr;
 
                       //定义x轴上的每列的标题
 
                       option.xAxis[0].data = xAxisDataArr[0].data;
 
                       //定义x轴上的每列的值
 
                       for(var i = 0; i < legendDataArr.length;i++) {
 
                       //添加上图例
 
                       option.series[i].name = legendDataArr[i];
 
                       //第二个是柱状图
 
                       option.series[i].type = "bar";
 
                       //为图标添加数据
 
                       option.series[i].data = seriesDataArr[i].data;
 
                       }
 
                       
 
                       // 为echarts对象加载数据 
 
                       myChart.setOption(option);
 
             },
 
             /**
 
              * id    :表示图标要放置的位置
 
              * json  :表示用于显示折线图时所用到的json数据
 
              */
 
             initLineChart:function(id,json) {
 
             var myChart = echarts.init(document.getElementById(id));
 
             
 
             var legendDataArr = json.legendDataArr;
 
           var xAxisDataArr = json.xAxisDataArr;
 
           var seriesDataArr = json.seriesDataArr;
 
             
 
             option = {
 
                        title:{
 
                                         show:true,
 
                                         text:"天检测量",
 
                                         textStyle:{
 
                                             fontSize:15,
 
                                             fontWeight:'normal'
 
                                               }
 
                       },
 
                   tooltip : {
 
                       trigger: 'axis'
 
                   },
 
                   legend: {
 
                    orient : 'horizontal',
 
                       x : 'center',
 
                       y : 'bottom',
 
                       data:['天检测量']
 
                   },
 
                   toolbox: {
 
                       show : true,
 
                       feature : {
 
                           mark : {show: true},
 
                           dataView : {show: true, readOnly: false},
 
                           magicType : {show: true, type: ['line', 'bar'/*, 'stack', 'tiled'**/]},
 
                           restore : {show: true},
 
                           saveAsImage : {show: true}
 
                       }
 
                   },
 
                   calculable : true,
 
                   xAxis : [
 
                       {
 
                           type : 'category',
 
                           boundaryGap : false,
 
                           data : ['周一','周二','周三','周四','周五','周六','周日']
 
                       }
 
                   ],
 
                   yAxis : [
 
                       {
 
                           type : 'value'
 
                     }
 
                   ],
 
                   series : [
 
                       {
 
                           name:'天检测量',
 
                           type:'line',
 
                           stack: '总量',
 
                           data:[120, 132, 101, 134, 90, 230, 210]
 
                       }
 
                   ]
 
               };
 
             
 
             option.legend.data = legendDataArr;
 
                       //定义x轴上的每列的标题
 
                       option.xAxis[0].data = xAxisDataArr[0].data;
 
                       //定义x轴上的每列的值
 
                       for(var i = 0; i < legendDataArr.length;i++) {
 
                       //添加上图例
 
                       option.series[i].name = legendDataArr[i];
 
                       //第二个是柱状图
 
                       option.series[i].type = "line";
 
                       //为图标添加数据
 
                       option.series[i].data = seriesDataArr[i].data;
 
                       }
 
             
 
             // 为echarts对象加载数据 
 
                       myChart.setOption(option);
 
             },
 
             /**
 
              * id    :表示图标要放置的位置
 
              * json  :表示用于显示柱状图时所用到的json数据
 
              */
 
             initPieChart:function(id,json) {
 
             var myChart = echarts.init(document.getElementById(id));
 
             
 
             var legendDataArr = json.legendDataArr;
 
             var seriesDataArr = json.seriesDataArr;
 
               option = {
 
                        title:{
 
                            show:true,
 
                            text:"用户来源",
 
                            textStyle:{
 
                                fontSize:15,
 
                                fontWeight:'normal'
 
                                 }
 
                   },
 
                   tooltip : {
 
                       trigger: 'item',
 
                       formatter: "{a} <br/>{b} : {c} ({d}%)"
 
                   },
 
                   legend: {
 
                       orient : 'horizontal',
 
                       x : 'center',
 
                       y : 'bottom',
 
                       //data:['华南','华东','西北','西南','华北',"华中"]
 
                       data:legendDataArr
 
                   },
 
                   toolbox: {
 
                       show : true,
 
                       feature : {
 
                           mark : {show: true},
 
                           dataView : {show: true, readOnly: false},
 
                           magicType : {
 
                               show: true, 
 
                               type: ['pie', 'funnel'],
 
                               option: {
 
                                   funnel: {
 
                                       x: '25%',
 
                                       width: '50%',
 
                                       funnelAlign: 'center',
 
                                       max: 1548
 
                                   }
 
                               }
 
                           },
 
                           restore : {show: true},
 
                           saveAsImage : {show: true}
 
                       }
 
                   },
 
                   calculable : true,
 
                   series : [
 
                       {
 
                           name:'用户来源',
 
                           type:'pie',
 
                           radius : ['50%', '70%'],
 
                           itemStyle : {
 
                               normal : {
 
                                   label : {
 
                                       show : false
 
                                   },
 
                                   labelLine : {
 
                                       show : false
 
                                   }
 
                               },
 
                               emphasis : {
 
                                   label : {
 
                                       show : true,
 
                                       position : 'center',
 
                                       textStyle : {
 
                                           fontSize : '20',
 
                                           fontWeight : 'bold'
 
                                       }
 
                                   }
 
                               }
 
                           },
 
                           data:[
 
                               {value:seriesDataArr[0], name:legendDataArr[0]},
 
                               {value:seriesDataArr[1], name:legendDataArr[1]},
 
                               {value:seriesDataArr[2], name:legendDataArr[2]},
 
                               {value:seriesDataArr[3], name:legendDataArr[3]},
 
                               {value:seriesDataArr[4], name:legendDataArr[4]},
 
                               {value:seriesDataArr[5], name:legendDataArr[5]},
 
                               {value:seriesDataArr[6], name:legendDataArr[6]}
 
                           ]
 
                       }
 
                   ]
 
               };
 
                        
 
//                      option.legend.data = legendDataArr;
 
        
 
//                 //定义x轴上的每列的值
 
//                 for(var i = 0; i < legendDataArr.length;i++) {
 
//                  //添加上图例
 
//                  option.series[0].data[i].name = legendDataArr[i];
 
         
 
//                  //为图标添加数据
 
//                  option.series[0].data[i].value = seriesDataArr[i].data;
 
//                 }
 
               
 
               // 为echarts对象加载数据 
 
        myChart.setOption(option);
 
             }
 
         };
 
})(jQuery);
 
 
 
$(function() {
 
         $.studentIndex.getData(contextPath +"/admin/index/getMonthData.action",     /**设置回调，对应的是后续项目中的action**/
 
                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
                            'statistics-month',                            /**表示图标要放在哪个id的div中*/
 
                            $.studentIndex.initBarChart                    /**回调，用于生成图标用*/
 
         );
 
         
 
         //$.studentIndex.getData(scriptsPath + "common/index/month.json",     /**设置回调，对应的是后续项目中的action**/
 
                                     //{"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
                                     //'statistics-month',                            /**表示图标要放在哪个id的div中*/
 
                                     //$.studentIndex.initBarChart                    /**回调，用于生成图标用*/
 
                   //);
 
         
 
         //$.studentIndex.getData(scriptsPath + "common/index/week.json",      /**设置回调，对应的是后续项目中的action**/
 
                   //       {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
                            //'statistics-week',                           /**表示图标要放在哪个id的div中*/
 
                            //$.studentIndex.initLineChart                   /**回调，用于生成图标用*/
 
         //);
 
         $.studentIndex.getData(
 
                            contextPath + "/admin/index/getDayData.action",     /**设置回调，对应的是后续项目中的action**/
 
                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
                            'statistics-week',                            /**表示图标要放在哪个id的div中*/
 
                            $.studentIndex.initLineChart                    /**回调，用于生成图标用*/
 
         );
 
         
 
//       $.studentIndex.getData(
 
//                          scriptsPath + "/student/index/user.json",      /**设置回调，对应的是后续项目中的action**/
 
//                          {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
//                          'statistics-user',                             /**表示图标要放在哪个id的div中*/
 
//                          $.studentIndex.initPieChart                   /**回调，用于生成图标用*/
 
//       );
 
         
 
         $.studentIndex.getData(
 
                            contextPath + "/admin/index/groupByArea.action",      /**设置回调，对应的是后续项目中的action**/
 
                            {"id":"testId","roleId":"roleId"},             /**对应的是后续传递给后台action的params参数*/
 
                            'statistics-user',                             /**表示图标要放在哪个id的div中*/
 
                            $.studentIndex.initPieChart                   /**回调，用于生成图标用*/
 
         );
 
         
 
         //$.studentIndex.initPieChart("statistics-user","");
 
         
 
         if ((navigator.userAgent.indexOf('MSIE') >= 0) 
 
                       && (navigator.userAgent.indexOf('Opera') < 0)){
 
                   $("#statistics-month").find("div:first-child").css("margin-left","-155px");
 
                   }
 
         
 
});
 

 
 

着出来的效果如下：
 

 

 
 



                

        

        

    

  


    

      

        

            

              
                
                  涂作权的博客
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
Echarts 图形实例（柱图，饼图，曲线图等）

				
			

			

				

					11-24
				

			

		

		

			
				
史上最强大的js图表库——ECharts，免费的图标控件，运行速度流畅，画面美观。

			
		

	



                

            
              



	

		

			

				
					
echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据

				
			

			

				

					一只爱吃糖的小羊
				

				

					04-11
					
					4万+
					
				

			

		

		

			
				
最近做的一个项目的其中一个页面有图表展示数据的需求，有柱状图、折线图和饼图，于是引入了强大的echarts. 
echarts的强大之处和有点这里就不多说了，详细请参照echarts官网和echarts在线demo。 
但是我们的页面要展示的数据比较多，同一个页面有数个折线图、柱状图和饼图。项目引入echarts的方法是模块化引入，于是就有了一个问题：怎么在同一个页面用echarts同时展示多个图...

			
		

	



              


  
              

                


	

		

			

				
					
栏目二：Echart绘制动态折线图+柱状图

					
最新发布

				
			

			

				

					m0_70405779的博客
				

				

					09-28
					
					1443
					
				

			

		

		

			
				
Echart绘制动态折线图+柱状图

			
		

	





	

		

			

				
					
echarts笔记篇——图表的大小如何调整

					
热门推荐

				
			

			

				

					astro小仙女
				

				

					05-28
					
					8万+
					
				

			

		

		

			
				
饼状图、柱状图、折线图的大小怎么控制？1、饼状图，直接在series里面，通过改变radius和center的大小值就可以调整大小。2、柱状图和折线图的大小通过调整grid里面的值。...

			
		

	



		

			
		



	

		

			

				
					
ECharts中折线图实例（源代码可直接运行）

				
			

			

				

					09-29
				

			

		

		

			
				
前段时间在网上看到ECharts这项技术，感觉他的功能非常强大，就去学习研究了下，这个是我练习折线图的实例，希望对各位有所帮助

			
		

	





	

		

			

				
					
页面利用ECharts显示柱状图、饼图、折线图、雷达图Demo

				
			

			

				

					weixin_34337265的博客
				

				

					01-28
					
					368
					
				

			

		

		

			
				
柱状图：  
 


&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;ECharts&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 为ECharts准备一个具备大小（宽高

			
		

	





	

		

			

				
					
Echarts折线图的实例

				
			

			

				

					Eiwen的博客
				

				

					12-16
					
					4789
					
				

			

		

		

			
				
使用eharts图表一共三步。第一步是创建两个js文件。一个用来设置图表格式，一个用来使用ajax渲染数据。

第一步，创建设置图表格式的js文件



/*设置格式*/
var configuration_option = {
    tooltip: {
         formatter:'{a0}: {c0}'+'个病毒'
    },
    color: [],
    legend

			
		

	





	

		

			

				
					
Echarts折线图案例

				
			

			

				

					hs1219462412的博客
				

				

					03-28
					
					1615
					
				

			

		

		

			
				
问题：重置echarts折线图时，总会出现多个数据的拐点，与实际渲染的数据拐点不符合。
解决： 在实例化echarts后 clear 上一次的图。
myEcharts.clear()

案例

const option = {
      // 触摸 echarts图 的提示内容
      tooltip: {
        // 是否显示提示框
        show: true,
        // 触发类型：
        // 'item':主要在散点图，饼图等无类目轴的图表中使用
   

			
		

	





	

		

			

				
					
echarts折线图例子

				
			

			

				

					qq719756146的博客
				

				

					03-15
					
					328
					
				

			

		

		

			
				
&amp;lt;template&amp;gt;
  &amp;lt;div class=&quot;content&quot;&amp;gt;
    &amp;lt;div ref=&quot;myChart&quot; class=&quot;classChart&quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;

			
		

	





	

		

			

				
					
echarts看板效果图：流光折线图、3d柱状图、3d饼图、3d地图

				
			

			

				

					weixin_41897680的博客
				

				

					11-23
					
					3246
					
				

			

		

		

			
				
echarts看板效果图：流光折线图、3d柱状图、3d饼图

			
		

	





	

		

			

				
					
echarts饼状图mysql_Echarts3.0+JavaWeb+Mysql实现饼图，折线图，柱状图

				
			

			

				

					weixin_42613773的博客
				

				

					01-27
					
					1308
					
				

			

		

		

			
				
Echarts3.0+Java+Mysql实现饼图，折线图，柱状图###写在前面：####入职第二周，老大布置的新技术探究——Echarts。主要对Echarts3.0的基本图表进行实现，即饼图，折线图，柱状图。 需求是：从数据库读取数据显示在前台，图表可根据数据库数据实时更新。 接到任务后一脸懵逼，立下军令状三天搞定。 本文实现是在参考http://blog.csdn.net/tgcxmxyz1...

			
		

	





	

		

			

				
					
echarts饼图扇区添加点击事件的实例

				
			

			

				

					08-29
				

			

		

		

			
				
下面小编就为大家带来一篇echarts饼图扇区添加点击事件的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
ECharts柱状图和饼图实现案例

				
			

			

				

					10-26
				

			

		

		

			
				
使用ECharts+Java实现的完整案例，包括实现柱状图和饼图，代码完整，有数据库文件，数据库为Oracle

			
		

	





	

		

			

				
					
Echarts折线图和柱状图的使用

				
			

			

				

					07-31
				

			

		

		

			
				
代码包括jsp文件，js文件，java文件。展示了Echarts中折线图和柱状图的使用，以及折线图的点击事情和自定义按钮等功能。

			
		

	





	

		

			

				
					
七张数据分析PPT饼图实例模板.rar

				
			

			

				

					07-15
				

			

		

		

			
				

这是七张数据分析PPT饼图实例模板，第一PPT模板网提供免费下载；
本组幻灯片饼状图，均为可编辑数据样式，非图片格式。如果你的PPT需要插入饼状图，那么您只需双击图标进行数据项的修改即可；
关键词：数据统计，数据分析，PPT饼图，幻灯片饼状图，PPT图表模板，.PPTX格式；

			
		

	





	

		

			

				
					
利用饼状图分析报表

				
			

			

				

					05-27
				

			

		

		

			
				
利用JFreeChat工具，根据后台数据库生成饼状图，良好的JFreeChat入门源码，包含数据库表

			
		

	





	

		

			

				
					
Echarts制作饼状图案例

				
			

			

				

					06-26
				

			

		

		

			
				
ECharts是一款由百度开发的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，精美的...同时，ECharts不仅限于饼状图，还包括柱状图、折线图、散点图等多种图表类型，是Web开发中不可或缺的数据可视化工具。

			
		

	





	

		

			

				
					
Echarts柱状图-Y轴文字倾斜显示(避免文字遮挡)

				
			

			

				

					日常笔记/总结/系列知识梳理
				

				

					08-14
					
					7778
					
				

			

		

		

			
				
主要通过改动xAxis下axisLabel来实现，如下图：

源码：
// 创建图表配置数据
this.options = {
    title: {
        left: 'center',
        text: this.title,
    },
    tooltip:{
        trigger:"axis"
    },
    legend:{
        d...

			
		

	





	

		

			

				
					
ECharts 入门级绘图（折线图 , 饼图，柱状图与进度条）

				
			

			

				

					qq_45596525的博客
				

				

					01-16
					
					919
					
				

			

		

		

			
				
文章目录前言一、ECharts是什么？二、ECharts的使用1.环境搭建2.折线图3.柱状图与进度条4.饼图


前言
好久没正经学习了。之前一直对数据可视化超级感兴趣的，好怀念以前自由自在，能学自己喜欢的东西的日子呀！

提示：以下是本篇文章正文内容，下面案例可供参考
一、ECharts是什么？
二、ECharts的使用
1.环境搭建
代码如下（示例）：
在这里插入代码片

2.折线图
代码如下（示例）：
在这里插入代码片

3.柱状图与进度条
在这里插入代码片

4.饼图
在这里插入代码片



..

			
		

	





	

		

			

				
					
vue中使用echarts制作圆环图

				
			

			

				

					06-13
				

			

		

		

			
				
要在Vue中使用ECharts制作圆环图，可以按照以下步骤进行：

Step 1：安装 ECharts

首先需要使用npm安装ECharts：

```
npm install echarts --save
```

Step 2：引入 ECharts

在Vue组件中引入ECharts：

```javascript
import echarts from 'echarts'
```

Step 3：创建 ECharts 实例

在Vue组件中创建ECharts实例：

```javascript
mounted() {
  this.drawChart();
},
methods: {
  drawChart() {
    let myChart = echarts.init(document.getElementById('chart'));
    //...此处省略其他配置
  }
}
```

Step 4：配置 ECharts

使用ECharts API进行配置，比如设置数据和样式：

```javascript
let option = {
  series: [{
    type: 'pie',
    radius: ['50%', '70%'],
    avoidLabelOverlap: false,
    label: {
      show: false,
      position: 'center'
    },
    emphasis: {
      label: {
        show: true,
        fontSize: '30',
        fontWeight: 'bold'
      }
    },
    labelLine: {
      show: false
    },
    data: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }]
};
myChart.setOption(option);
```

Step 5：在模板中使用 ECharts

在Vue模板中使用ECharts实例：

```html
<template>
  <div id="chart" style="height: 300px;"></div>
</template>
```

这样就可以在Vue中使用ECharts制作圆环图了。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
涂作权的博客

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值