首页 > 编程知识 正文

echarts实例代码,echarts实例网站

时间:2023-05-03 21:00:11 阅读:255565 作者:459

 Echarts 官网:http://echarts.baidu.com/

1.在官方下载echarts.js (完整版):http://echarts.baidu.com/download.html

2.引入js(本项目是mui开发app 创建)(注意路径问题)

3.通用样式:

<body> <!-- 为 ECharts 准备一个具备大小(宽高)--> <div id="main" style="width: 400px;height:300px;"></div><script src="../js/echarts.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { **************************** }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body>

4.实例:

<!doctype html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="external nofollow" href="../css/mui.min.css" rel="stylesheet" /></head><body> <!-- 为 ECharts 准备一个具备大小(宽高)--> <div id="main" style="width: 400px;height:300px;"></div><script src="../js/echarts.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { backgroundColor: '#2c343c', title: { text: 'Customized Pie', left: 'center', top: 20, textStyle: { color: '#ccc' } }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, visualMap: { show: false, min: 80, max: 600, inRange: { colorLightness: [0, 1] } }, series : [ { name:'访问来源', type:'pie', radius : '55%', center: ['50%', '50%'], data:[ {value:335, name:'直接访问'}, {value:310, name:'邮件营销'}, {value:274, name:'联盟广告'}, {value:235, name:'视频广告'}, {value:400, name:'搜索引擎'} ].sort(function (a, b) { return a.value - b.value; }), roseType: 'radius', label: { normal: { textStyle: { color: 'rgba(255, 255, 255, 0.3)' } } }, labelLine: { normal: { lineStyle: { color: 'rgba(255, 255, 255, 0.3)' }, smooth: 0.2, length: 10, length2: 20 } }, itemStyle: { normal: { color: '#c23531', shadowBlur: 200, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, animationType: 'scale', animationEasing: 'elasticOut', animationDelay: function (idx) { return Math.random() * 200; } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script></body></html>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。