Echarts的应用实践

Echarts官网：https://echarts.apache.org/

echarts是百度推出的，使用JavaScript实现的开源可视化库，可以提供直观、可定制化的数据可视化图表，包括折线图、柱状图、散点图、地图和饼图等

在js里面的写法：

self.Chart3=echarts.init(self.$el.find('#mo_chart3')[0]);
self.Chart3.setOption(self.get_chart3_option(self.render_data.block3));

self.Chart5=echarts.init(self.$el.find('#mo_chart5')[0]);
self.Chart5.setOption(self.get_chart5_option());

get_chart3_option:function(block){
             return{
                  tooltip:{
                     trigger:'item',
                     formatter:"{a} <br/> {b}: {c} (%)"
                  },
                  legend:{
                      orient: 'vertical',
                      left: 'left',
                      data:['报价','报价已发送','销售订单']
                  },
                  toolbox:{
                      show:true,
                      feature:{
                            dataView:{show:true,readOnly:false},
                            saveAsImage:{show:true},
                      }
                  },
                  series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center:['50%','60%'],
                        color:['#e40523',"#56e42f","#a414e4"],
                        data: [
                            {value: block['type_num']['A'], name: '报价'},
                            {value: block['type_num']['B'], name: '报价已发送'},
                            {value: block['type_num']['C'], name: '销售订单'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
             };
         },

         get_chart5_option:function(block){
             return {
//                title: {
//                    text: 'Graph 简单示例'
//                },
                tooltip: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                series: [
                    {
                        type: 'graph',
                        layout: 'none',
                        symbolSize: 80,
                        roam: true,
                        label: {
                            show: true
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            fontSize: 20
                        },
                        data: [{
                            name: '节点1',
                            value:'test1',
                            x: 300,
                            y: 300,
                            itemStyle: {
                               color: '#008dca',
                            }
                            }, {
                            name: '节点2',
                            value:'test2',
                            x: 400,
                            y: 300,
                            itemStyle: {
                               color: 'yellow',
                            }
                            }, {
                            name: '节点3',
                            value:'test3',
                            x: 500,
                            y: 300,
                            itemStyle: {
                               color: 'green',
                            }
                            }, {
                            name: '节点4',
                            value:'test4',
                            x: 600,
                            y: 300,
                            itemStyle: {
                                color: 'red',
                            }
                            },{
                            name: '节点5',
                            value:'test5',
                            x: 700,
                            y: 300,
                            itemStyle: {
                                color: 'blue',
                            }
                        }],
                        // links: [],
                        links: [{
                            source: 0,
                            target: 1,
                            symbolSize: [5, 20],
                        }, {
                            source: '节点1',
                            target: '节点2'
                        }, {
                            source: '节点2',
                            target: '节点3'
                        }, {
                            source: '节点3',
                            target: '节点4'
                        }, {
                            source: '节点4',
                            target: '节点5'
                        }],
                        lineStyle: {
                            opacity: 0.9,
                            width: 5,
                            color:'red',
                            curveness: 0
                        }
                    }
                ]
            };
         },

 

在xml里写法

<div class="panel-body">
   <div id="mo_chart3" style="width:100%;height:300px"/>

 </div>

 

 导入echarts包：

<script type="text/javascript" src="/demo/static/src/js/echarts.min.js"/>

 

最后形成的效果图：