cast？
ECharts is an open source visualization library implemented in JavaScript, covering various industry charts to meet various needs.
ECharts follows the Apache-2.0 open source protocol and is free for commercial use.
ECharts is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and a variety of devices, and can be displayed anytime, anywhere.
ECharts includes the following features:
- Rich visualization types : Provides regular line graphs, histograms, scatter graphs, pie charts, K-line graphs, box graphs for statistics, maps, heat maps, and line graphs for geographic data visualization, for Relationship diagrams, treemaps, sunburst diagrams for relational data visualization, parallel coordinates for multidimensional data visualization, as well as funnel diagrams and dashboards for BI, and support for mashup between diagrams.
- Multiple data formats can be used directly without conversion : the built-in dataset attribute (4.0+) supports direct input of data sources including two-dimensional tables, key-value and other formats, and also supports input of data in TypedArray format.
- Front-end display of tens of millions of data : Through incremental rendering technology (4.0+), combined with various meticulous optimizations, ECharts can display tens of millions of data.
- Mobile terminal optimization : Careful optimization has been made for mobile terminal interaction, for example, it is suitable for zooming and panning in the coordinate system with fingers on the small screen of the mobile terminal. On the PC side, you can also use the mouse to zoom (use the mouse wheel), pan, etc. in the graph.
- Multi-rendering solutions, cross-platform use : support rendering charts in the form of Canvas, SVG (4.0+), and VML.
- In-depth interactive data exploration : Provides out-of-the-box interactive components such as legend, visual map, data area zoom, tooltip, and data brush selection, which can perform interactive operations on data such as multi-dimensional data filtering, view zooming, and display details .
- Multi-dimensional data support and rich visual coding methods : For traditional scatter plots, etc., the incoming data can also be multi-dimensional.
- Dynamic Data : Changes in data drive changes in chart presentation.
- Gorgeous special effects : eye-catching special effects are provided for the visualization of geographic data such as line data and point data.
- Realize more powerful and brilliant 3D visualization through GL : Realize 3D visualization in VR and large-screen scenes.
- Barrier-free access (4.0+) : Support automatic intelligent generation of descriptions based on chart configuration items, so that blind people can understand the content of charts with the help of reading devices, making charts accessible to more people!
Basic usage and syntax format of Echarts
Using Echarts requires a container to fill the relevant chart legend
-
import cdn
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -
First create a container (take the div box model as an example), you need to specify the width and height otherwise it will not take effect.
<div id="myEchart1" style="width:300px;height:200px;"> </div> -
Get the echarts object and initialize the option configuration parameters (JSON data format)
Divided into three steps:
// 1.根据id获取dom元素，并且创建echart实例对象 var myEchart1 = echarts.init(document.getElementById('myEchart1')); // 2.设定配置项及图表初始化数据 var option = { .....} // 3.将设置的配置项设定到echart实例中 myEchart1.setOption(option);An example of use is as follows:
<script> // 1.根据id获取dom元素，并且创建echart实例对象 var myEchart1 = echarts.init(document.getElementById('myEchart1')); // 2.设定配置项及图表初始化数据 var option = { // 标题 title: { text: '编程语言投票', left: 'center', top: 20, textStyle: { color: 'black' } }, // 配置提示信息 tooltip: { }, // 图例组件 legend: { data: ['编程语言'] }, // x轴要显示的值 xAxis: { data: ["Java", "C", "Php", "Go", "Python", "JavaScript"] }, // y轴要显示的值 yAxis: { }, //系列列表，每个系列通过 type 决定自己的图表类型 // bar 柱状条形图，line折线，pie饼图.... series: [{ name: '排名占比', type: 'bar', data: [50, 40, 36, 30, 48, 38] }] }; // 3.将设置的配置项设定到echart实例中 myEchart1.setOption(option); </script>
-
option configuration item description
Refer to the official document, which has a complete and detailed description https://echarts.apache.org/zh/option.html
JSON data format
// 1. 标题 title:{ } // 2.配置提示信息 tooltip:{ } // 3.图例组件 lengend:{ // 数据项 data:[{ }] } // 4.横纵轴显示 xAxis:{ } yAxis:{ } //4. series系列列表，每个系列通过 type 决定自己的图表类型 // bar 柱状条形图，line折线，pie饼图.... series: [{ name: 'xxx', // 系列名称 type: 'xxx', // 系列图表类型 data: [] // 系列中的数据内容 }]The optional value of type in series:
- type: 'bar' : Column/bar chart type: 'line' : Line/area chart
- type: 'pie' : pie chart type: 'scatter' : scatter (bubble) chart
- type: 'effectScatter' : Scatter (bubbles) with ripple effect animation
- type: 'radar' : radar map type: 'tree' : tree map
- type: 'treemap' : tree map type: 'sunburst' : sunburst map
- type: 'boxplot' : box plot type: 'candlestick' : candlestick chart
- type: 'heatmap' : heat map type: 'map' : map
- type: 'parallel' : series of parallel coordinate systems type: 'lines' : line graph
- type: 'graph' : relationship graph type: 'sankey' : Sankey diagram
- type: 'funnel' : funnel chart type: 'gauge' : dashboard
- type: 'pictorialBar' : pictorial bar chart type: 'themeRiver' : theme river
- type: 'custom' : custom series
Simple chart drawing and use
1. Simple pie chart drawing and configuration when highlighting is selected
The pie chart mainly shows the proportion of different categories of data in the total through the radian of the sector. Its data format is simpler than that of the histogram. It only has one-dimensional values and does not need to give categories. Because it is not on a Cartesian coordinate system, xAxis and yAxis are not needed.
The configuration when highlighting is selected, that is, a style in the area is selected by the mouse, and echarts provides us with emphasis to configure the selected style
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: 'cyan'
},
label: {
show: true,
// 高亮时标签的文字
formatter: 'hihihi'
}
}
Small example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 饼图</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="pie1" style="width:400px;height: 300px;">
</div>
<script>
var pie1 = echarts.init(document.getElementById('pie1', 'dark'));
var option = {
tooltip: {
},
series: [
{
name: '学分信息',
type: 'pie', // 设置图表类型为饼图
radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
// 高亮时的配置
emphasis: {
itemStyle: {
// 高亮时点的颜色
color: 'cyan'
},
label: {
show: true,
// 高亮时标签的文字
formatter: 'hihihi'
}
},
data: [ // 数据数组，name 为数据项名称，value 为数据项值
{
value: 33.5, name: '公共必修课' },
{
value: 78, name: '公共选修课' },
{
value: 12, name: '专业选修课' },
{
value: 6, name: '专业必修课' },
],
}
]
};
pie1.setOption(option);
</script>
</body>
</html>
2. Legend addition
Legend addition, which is often used when we draw charts, is configured using legend.
In echarts, the legend is the comment on the elements of the content area in the chart, and uses different shapes, colors, texts, etc. to mark different data columns. By clicking the mark of the corresponding data column, the data column can be displayed or hidden.
In the four directions in the legend, if bottom and top write strings, they are the corresponding center, left..., and then numbers can be written in the four directions, which means the corresponding margin value
legend: {
// 图例排列方式 水平或者垂直 horizontal | vertical
orient: 'vertical',
// 图例的详细位置信息
left: 10,
top: 'center',
bottom: 10,
right:10
},
Small example:
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<div id="pie2" style="width:400px;height:400px;">
</div>
<script>
var pie2 = echarts.init(document.getElementById('pie2'));
var option = {
legend: {
orient: 'vertical',
right: 10,
top: 'center'
},
tooltip: {
},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {
type: 'category' },
yAxis: {
},
series: [{
type: 'bar' }, {
type: 'bar' }, {
type: 'bar' }]
};
pie2.setOption(option);
</script>
I think the above legend style is too monotonous, you can use legend.data to set the legend name (name) and legend icon (icon)
For example, we modify the above code as follows:
legend: {
// orient: 'vertical',
// right: 10,
// top: 'center',
data: [
{
name: '2015',
icon: 'rect'
},
{
name: '2016',
icon: 'circle'
},
{
name: '2017',
icon: 'pin'
}
]
},
There are still many shortcomings, and more will be added later!