zoukankan      html  css  js  c++  java
  • echarts入门基础,画一个饼状图

    注意:一定要自己引入echarts库

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
    #canvas-main{
    width: 600px;
    height: 400px;
    }
    </style>
    </head>
    <body>
    <div id="canvas-main">
    
    </div>
    </body>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript">
    /*echart数据报表*/
    function echarCreate() {
    var allData = {
    "lists":[{"name":"星期一","value":"456"},
    {"name":"星期二","value":"321"},
    {"name":"星期三","value":"226"},
    {"name":"星期四","value":"200"}
    ],
    "status":"1"
    }
    var fn = {};
    fn.init = function () {
    fn.drawEchart();
    };
    fn.drawEchart = function () {
    
    if(allData.status){
    var option = fn.setOptions();
    var myChart = echarts.init(document.getElementById('canvas-main'));
    myChart.setOption(option);
    }
    
    };
    
    /*设置好echarts的option参数*/
    fn.setOptions = function () {
    var data = [];
    for (var i = 0; i < allData.lists.length; i++){ 
    data.push(fn.setData(allData.lists[i].value, allData.lists[i].name));
    };
    var option = {
    tooltip: {/*鼠标跟随效果*/
    trigger: 'item',
    formatter: "{b}: {d}%" 
    },
    series: [
    {
    name: '',/*数据名称*/
    type: 'pie',
    radius: ['31.25%', '60%'], /*相对容器的大小*/
    data: data
    }
    ]
    };
    return option;
    };
    
    /*设置echar的样式,主要是改变颜色
    value:option中data数据的value
    name:option中data数据的name
    * normal:正常状态下的样式
    * emphasis:鼠标移上的样式
    * */
    fn.setData = function (value, name, normal, emphasis) {
    var Style = {
    value: value,
    name: name,
    itemStyle: { /*设置扇形的样式*/
    normal: {
    color: normal
    },
    emphasis: {
    color: emphasis
    }
    },
    labelLine: {
    normal: {
    lineStyle: { /*设置线的样式*/
    
    }
    },
    emphasis: {
    lineStyle: { /*设置线的样式*/
    
    }
    }
    },
    label: {
    normal: {
    textStyle: {/*文本设置*/
    
    }
    },
    emphasis: {
    textStyle: {
    
    }
    }
    }
    }
    return Style;
    };
    
    
    return fn;
    }
    
    echarCreate().init();
    </script>
    </html>
  • 相关阅读:
    eclipse springboot运行helloworld错误: 找不到或无法加载主类 xxx.xxx.xxx
    springboot整合quartz并持久化到数据库
    pssh批量管理服务器
    网络拓扑图练习
    网络设备之ospf2
    网络设备之基础配置命令(华为交换机二三层)
    华为交换机配置静态路由
    docker参考文档
    docker系列之镜像服务器
    docker系列之分区挂载和数据卷
  • 原文地址:https://www.cnblogs.com/muamaker/p/6181408.html
Copyright © 2011-2022 走看看