Objective
Recently, projects like this have been done at work. The use of Baidu's echarts this open-source data visualization framework.
Because the splash screen project is not like a PC-side web, it does not allow users to interact with the mouse and keyboard. Some charts can only see the proportion of each part and cannot display a specific value.
Like what:
Let the page data (that is, tootips) automatically carousel data, the effect is this.
So Echarts-auto-tooltips was born.
GitHub Address
How to use
- Introduction of Ehcrts-auto-tooltips
<script type="text/javascript" src="js/echarts-auto-tooltip.js"></script>
- Add the following code under the code that initializes the Echarts instance and generates the chart through the SetOption method
// 使用指定的配置项和数据显示图表myChart.setOption(option);tools.loopShowTooltip(myChart, option, {loopSeries: true}); // 使用本插件
Parameter description
MyChart: Initializing an instance of Echarts
Option: Specify configuration items and data for the chart
Loopoption: Configuration of this plugin
Properties |
Description |
Default Value |
Interval |
Carousel time interval, in milliseconds |
Default is 2000 |
Loopseries |
True indicates that Tooltip,false for all series displays the tooltip for the specified seriesindex |
Boolean type, default = False |
Seriesindex |
Specifies that a series (series index in option) cycles through the ToolTip and executes from the Seriesindex series when Loopseries is true. |
Default is 0 |
Instance Code
function Drawsensitivefile () {Let mychart = Echarts.init (document.getElementById (' sensitive-file ')); Let option = {title: {text: ' Sensitive file distribution analysis ', x: ' + ', TextStyle: {col Or: ' #fff '}, tooltip: {trigger: ' item ', formatter: ' {a} <br/>{b} : {C} ({d}%) ",}, Legend: {type: ' scroll ', Orient: ' Vertical ', right:10, TOP:20, BOTTOM:20, data: [' personnel ', ' research and Development ', ' marketing class ', ' Customer Information class '], TextStyle: { Color: ' #fff '}, series: [{name: ' Number of sensitive file distributions ', Type: ' Pie ', radius: ' 55% ', center: [' 50% ', ' 60% '], data: [ {value:335, Name: ' Personnel class '}, {value:310, Name: ' Research and Development class '}, {value:234, Name: ' Marketing class '}, {value:1548, name: ' Customer information class '}], ItemStyle: {emphasis: {shadowblur: Ten, shadowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) ' }}, Labelline: {normal: {//length:5,//change marker line Length LineStyle: {color: "#fff"//change the color of the marker line} },}, Label: {normal: {textStyle: {color: ' #fff '//change the color of the marked text}} }, } ] }; mychart.setoption (option); Tools.loopshowtooltip (mychart, option, {loopseries:true});}
Echarts Implementation data (tooltip) auto-Carousel plugin