Example of using the ECharts dashboard in js

We often see dashboards, such as dashboards in the cockpit of a car. Dashboards created using Echarts can easily display user data and clearly show the range of a specific indicator value, reports in the form of dashboards are applied in various statistical systems. This document describes the statistical application of dashboards in the sales task completion rate based on examples.

 

HTML

First, introduce Echarts, add div # myChart where you want to place the chart, and add the width and height attributes to it.
<Script src = "echarts. min. js"> </script>
 
<Div id = "myChart" style = "width: 600px; height: 400px;"> </div>

Javascript

Next, initialize the echarts instance, set options, and render the image.
Var myChart = echarts. init (document. getElementById ('mychart '));
 
Option = {
Tooltip :{
Formatter: "{a} <br/> {B }:{ c} %"
},
Series :[
        {
Name: 'Business Index ',
Type: 'gauge ',
Detail: {formatter: '{value} %'}, // Display data on the dashboard
AxisLine: {// dashboard axis style
LineStyle :{
Width: 20
                }
},
SplitLine: {// Split line style
Length: 20
},
Data: [{value: 50, name: 'completion rate'}]
        }
    ]
};
 
MyChart. setOption (option );

The tooltip in option settings is a prompt box component. The default parameter "show: true" indicates that the prompt box is displayed. The formatter parameter is the content format of the floating layer of the prompt box. It supports two formats: string template and callback function. Generally, we use a string template. The Template variables include {a}, {B}, {c}, {d}, and {e}, indicating the series name, data name, and data value respectively. When the trigger is 'Axis ', there will be multiple series of data. In this case, you can use {a0}, {a1 }, {a2} this index is added to indicate the series indexes. The meanings of {a}, {B}, {c}, and {d} in different chart types are different. The following three types of chart parameters: {a} (series name), {B} (data item name), {c} (value ), {d} (percentage ).
The series option is the series list. Each series uses type to determine its own chart type. It contains many parameters. The parameter name indicates the series name, which is used for display of tooltip and legend filtering of legend. It is used to specify the corresponding series when setOption updates data and configuration items. The type parameter indicates the chart type. type: 'gauge' indicates the dashboard. The detail parameter indicates the details of a dashboard. It is used to display data and defines the height, width, background color, and border color of the data. In this example, the details of a dashboard are displayed as percentages. The axisLine parameter can be used to define the axis configurations of a dashboard, such as the axis style. The splitLine parameter is used to define the separation line style in the dashboard, such as the line length, line color, and line width. The parameter data is used to display data. You can set the values and names of the dashboard indicators.
If it is a dynamically changing dashboard, you can use setInterval () to regularly change the value of the instrument, as shown in the following code.

ClearInterval (timeTicket );
Var timeTicket = setInterval (function (){
Option. series [0]. data [0]. value = (Math. random () * 100). toFixed (2)-0;
MyChart. setOption (option, true );
},2000 );