|
@@ -0,0 +1,77 @@
|
|
|
+const $ = require('jquery');
|
|
|
+require("../css/reset.less")
|
|
|
+require("../css/console.less")
|
|
|
+require("../images/logo.png")
|
|
|
+// import 'zrender/lib/svg/svg';
|
|
|
+const echarts = require('echarts');
|
|
|
+console.log(echarts)
|
|
|
+$(function(){
|
|
|
+ // var myChart = echarts.init(document.getElementById('echarts'));
|
|
|
+ var myChart = echarts.init(document.getElementById('main'));
|
|
|
+ // 绘制图表
|
|
|
+ let app = {}
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: '饼图程序调用高亮示例',
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ left: 'left',
|
|
|
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '访问来源',
|
|
|
+ type: 'pie',
|
|
|
+ radius: '55%',
|
|
|
+ center: ['50%', '60%'],
|
|
|
+ data: [
|
|
|
+ {value: 335, name: '直接访问'},
|
|
|
+ {value: 310, name: '邮件营销'},
|
|
|
+ {value: 234, name: '联盟广告'},
|
|
|
+ {value: 135, name: '视频广告'},
|
|
|
+ {value: 1548, name: '搜索引擎'}
|
|
|
+ ],
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ app.currentIndex = -1;
|
|
|
+
|
|
|
+ setInterval(function () {
|
|
|
+ var dataLen = option.series[0].data.length;
|
|
|
+ // 取消之前高亮的图形
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'downplay',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: app.currentIndex
|
|
|
+ });
|
|
|
+ app.currentIndex = (app.currentIndex + 1) % dataLen;
|
|
|
+ // 高亮当前图形
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'highlight',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: app.currentIndex
|
|
|
+ });
|
|
|
+ // 显示 tooltip
|
|
|
+ myChart.dispatchAction({
|
|
|
+ type: 'showTip',
|
|
|
+ seriesIndex: 0,
|
|
|
+ dataIndex: app.currentIndex
|
|
|
+ });
|
|
|
+ }, 1000);
|
|
|
+ myChart.setOption(option);
|
|
|
+})
|
|
|
+
|