zoukankan      html  css  js  c++  java
  • 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, 5, color:'red', curveness: 0 } } ] }; },

    在xml里写法

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

     导入echarts包:

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

    最后形成的效果图:

     

    心有猛虎,细嗅蔷薇
  • 相关阅读:
    Zend框架2入门(二) (转)
    Zend框架2入门(一) (转)
    PHP Strict standards:Declaration of … should be compatible with that of…(转)
    ::符号
    mysql查询今天,昨天,近7天,近30天,本月,上一月数据的方法(转)
    php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法(转)
    PHP5.4新特性(转)
    PHP5.4的变化关注---What has changed in PHP 5.4.x(转)
    关于PHP的curl开启问题 (转)
    安装apache重启的时候,报错端口被占用,错误1
  • 原文地址:https://www.cnblogs.com/1314520xh/p/14679221.html
Copyright © 2011-2022 走看看