ECharts dashboard instance code (with source code download), echarts dashboard

ECharts dashboard instance code (with source code download), echarts dashboard

You can see the dashboard at a glance in the cockpit of the car. The dashboard 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.

Download demo source code

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} %'}, // 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); 

The above content introduces you to the ECharts dashboard instance code, hope to help you!

Articles you may be interested in:

• Echarts chart export excel example
• Cause Analysis and Solution for data not displayed in echarts obtained by Ajax