Know ECharts

ECharts, short for Enterprise Charts, is an open source data visualization tool for Baidu. It is a pure Javascript chart library that can run smoothly on PC and mobile devices. Compatible with most current browsers (IE6/7/8/9/10/11, Chrome, Firefox, Safari, etc.), ECharts relies on the lightweight Canvas library ZRender to provide intuitive, vivid, interactive and highly personalized data visualization charts. Innovative drag-and-drop recomputing, data view, range roaming and other features greatly enhance user experience, giving users the ability to mine and integrate data.

What are the characteristics of ECharts

ECharts is open source, and we have a really cool graphical interface that features maps,

How do I install ECharts

Get ECharts

You can get ECharts in several ways.

  • Have a webpack/parcel

Reference echarts in typescript+Vue projects. To strengthen the reference, introduce two packages: echarts and @types/echarts. One is an engineering dependency and the other is a declaration dependency.

yarn add echarts
yarn add --dev @types/echarts
Copy the code

Echarts is then introduced into the components that need to reference it

import echarts from 'echarts'; Or var echarts = require ('echarts')
Copy the code

  • No webpack/parcel

    Search for echarts with a CDN such as BootCDN, search for echarts with min in the result, and place it in index.html

Then use the global variable window.echarts

The following 2 kinds are very troublesome, generally not recommended

  • Obtain the official source code package from the Apache ECharts (Incubator) website and build it.

  • Get it on GitHub at ECharts.

Using ECharts

Replace the topic

Reframe your chart as a whole and customize your own theme in addition to the official one

Method of use

html
<script src="echarts.js"></script> <! -- Introduce the vintage theme --> <script SRC ="theme/vintage.js"Var chart = echarts.init(document.getelementById ())'main'), 'vintage');
chart.setOption({
    ...
});
</script>
Copy the code

Click on the event

User actions in ECharts diagrams trigger events. Developers can listen for these events and then use callbacks to do things like jump to an address, or pop up a dialog box, or drill down data, etc.

myChart.on('click'.function(params) {// The name of the console to print data console.log(params.name); });Copy the code

Mobile adaptive

Sometimes a chart needs to be displayed on both PC and mobile devices. This requires the ability of ECharts internal components to change as the container size changes.

To solve this problem, ECharts refined the positioning Settings of components and implemented CSS Media Query adaptive capabilities.

Conventional techniques

  1. Meta: ViewPort Meta: ViewPort

  2. Get the screen width set with JS on div

const width = document.documentElement.clientWidth
Copy the code
  1. Set aspect ratio
main.style.width=`${width}px`

main.style.height=`The ${width * 1.2}Px '// Personal experience used 1.2 timesCopy the code

Features provided by Echarts

baseOption+media

Option = {baseOption: {// Here is the basic "atomic option". title: {... }, legend: {... }, series: [{...}, {...}, ...] . }, media: [// this defines the media Query rule by rule. {query: {...}, // this defines the rule by rule. Option: {// this defines the rule by rule. }}, {query: {maxWidth:500}, // The second rule. {...},...}}, {/ / there is no written rules, this article says the "default", option: {/ / that all rules are not met, adopt this option. Legend: {...},...}}};Copy the code

Query the document

ECharts is well documented,

There are a lot of examples, basically what type of copy you want to change