Article Directory
Effect
The framework I use here is Element+vue, which wraps the visual chart with a card. The main functions of this stacked line area chart are:
1. By default, what you see when you enter is a stacked line area chart. Click on the corresponding element to switch to display the details of the element. For example, if I click on the warehouse inventory here, it will change to display the details of the warehouse inventory and switch to a stacked line chart. .
2. The design of the toolbar in the upper right corner, including return, save as PDF image, switch line chart, switch histogram, data view
3. Click the card on the top to switch the data display of 90 days, 30 days, and 7 days (not yet implemented follow-up update)
1. Global introduction of ECharts
1. Install ECharts
npm install echarts --save
2. main.js global import
//引入ECharts制作数据可视化
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
new Vue({
echarts,
render: h => h(App)
}).$mount('#app')
2. Use in the page
1. Create a storage location for visual charts
I am using the UI of Element here, using layout + cards, you can go to the official document of Element for details, here is a core code:
<div class="mar-top-20" id="linechart" ref="linechart" style="width:100%;height:400px;"></div>
2. Render ECharts
code first
linechart(){
var chartDom = this.$refs['linechart']
var myChart = this.$echarts.init(chartDom);
var option;
var option1;
var option2
option1 = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: [`${
this.$t('Warehouse_capacity')}`, '使用库容', '在途库容', '剩余库容', '使用仓位','可用仓位'],
left:'left'
},
toolbox: {
feature: {
saveAsImage: {
},
dataView:{
},
magicType: {
type: ['line', 'bar']}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '仓库库容',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '使用库容',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '在途库容',
type: 'line',
stack: 'Total',
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '剩余库容',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'bottom'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '使用仓位',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'bottom'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: '可用仓位',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'bottom'
},
areaStyle: {
},
emphasis: {
focus: 'series'
},
data: [100, 932, 901, 934, 1290, 1330, 1320]
}
],
};
option2 = {
title: {
text: '各仓库详细数据'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['CEBU01', 'MNL-01-VALENZUELA', 'MANILA02', 'CDO01', 'TAIWAN02','MNL-02-BULACAN']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
itemSize: 15,
itemGap:8,
feature: {
myBreak:{
show:true,
title:'返回',
icon: `image://${
require('@/assets/images/back.png')}`,
onclick:function () {
myChart.clear();
option = option1;
option && myChart.setOption(option);
}
},
saveAsImage: {
},
dataView:{
},
magicType: {
type: ['line', 'bar']}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'CEBU01',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'MNL-01-VALENZUELA',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'MANILA02',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'CDO01',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'TAIWAN02',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: 'MNL-02-BULACAN',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 默认显示第一个chart
option = option1;
option && myChart.setOption(option);
//根据窗口的大小变动图表 --- 重点
window.onresize = function(){
option && myChart.setOption(option);
myChart.resize();
}
// 点不同的按钮，就切换不同的option，要记得先清除上一个chart，否则会叠加在一起显示
myChart.on('click',(params)=>{
if (option == option1) {
myChart.clear();
option = option2;
option && myChart.setOption(option);
}else{
return
}
console.log(params);
})
}
chartDom : Get the Dom of the created div
myChart : Render the main body
option : Render the content, pay attention to an important point here, the essence of switching the visual view is to switch the display in the option, I have two options here (option1, option2), in different Display switching in the case of
option && myChart.setOption(option);
This line represents rendering. It needs to be re-rendered when the window changes, and it needs to be re-rendered when the display is switched.
window.onresize
Get the event of window change, trigger redrawing when the window changes, and achieve the goal of adaptive icon
myChart.on(‘click’,(params)=>{
})
Here is to get the click event of the icon, trigger the function to execute the corresponding logic
Summarize
Here are some **knowledge points (keng)** need to pay attention
toolbox
toolbox: {
itemSize: 15,
itemGap:8,
feature: {
myBreak:{
show:true,
title:'返回',
icon: `image://${
require('@/assets/images/back.png')}`,
onclick:function () {
myChart.clear();
option = option1;
option && myChart.setOption(option);
}
},
saveAsImage: {
},
dataView:{
},
magicType: {
type: ['line', 'bar']}
}
},
Toolbox is a custom toolbar. Here you need to pay attention to one point. When calling your own local icon, you must ensure that the format is correct. You must add: image:// before calling, otherwise it will be invalid. I am using the method in
vue and need to require(). Can take effect :
icon:
image://${require('@/assets/images/back.png')},
In addition to this calling method there are:
1. The URL is a picture link, for example:
‘image://http://xxx.xxx.xxx/a/b.png’
2. URL is dataURI For example:
‘image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7’
3. Set the icon to any vector path via 'path://'
‘path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z’
and then some properties
-
Properties in the toolbox, which does not contain the five tools. The most important thing in it is feature, which is the configuration item of toolbox, and the configuration of the five tools is realized in this.
toolbox.show
boolean
The default value is true, whether to display toolbar components
toolbox.orient
stirng
The default value is horizontal, which is the layout orientation of the toolbar icon. Available options are "horizontal" and "vertical"
toolbox.itemSize
number
The default value is 15, the size of the toolbar icon.
toolbox.itemGap
number
The default value is 10, the interval between each item of the toolbar icon. The horizontal interval is used for horizontal layout, and the vertical interval is used for vertical layout.
toolbox.showTitle
boolean
The default value is true, whether to display the title of each tool icon when the mouse is over.
toolbox.feature
Object
Each tool configuration item.
In addition to the individual built-in tool buttons, tool buttons can also be customized.
Note that the custom tool name can only start with my.
-
The five tools are described below
saveAsImage : This tool can save the chart as an image. There are some commonly used parameters, type->the format of the saved picture, name->the name of the saved file, backgroundColor->the background color of the saved picture, show->whether to display the tool, and some other attributes that can be used by yourself Time to query the API documentation.
restore : Restore configuration items. The main property is show->whether to show the tool.
dataView : A data view tool that can display the data used in the current chart and can be dynamically updated after editing. show->whether to display the tool, readOnly->whether it is not editable, optionToContent->custom dataView display function to replace the default textarea and use richer data editing. Can return dom object or html string, backgroundColor->data view floating layer background color.
dataZoom : Data area zoom. At present, only the zooming of the Cartesian coordinate system is supported (the meaning here is the column, the line graph can be zoomed, but the pie chart cannot be zoomed). show->whether to show the tool.
magicType : Dynamic type switching. show->Whether to display the tool, type->This is an array, the dynamic type enabled, including 'line' (switched to a line chart), 'bar' (switched to a histogram), 'stack' (switched to a stacked mode) , 'tiled' (toggle to tiled mode).
ECharts mouse event
An event is a certain action performed by the user or the browser itself, such as click, mouseover, and the load event triggered after the page is loaded, all of which are events.
In order to record the user's operation and behavior path, it is necessary to complete the processing of mouse event processing and component interaction behavior events.
click: Triggered when the left mouse button is clicked on the target element. dblclick cannot be triggered by the keyboard
: on the target element, trigger when the left mouse button is double-clicked
mouseup: on the target element, trigger when the mouse button is released and popped up. Mousedown cannot be triggered by keyboard
: Triggered when the mouse button (left or right button) is pressed on the target element. Mouseover cannot be triggered by the keyboard
: it is triggered when the mouse moves over the target element. mousemove is also triggered when the mouse is moved over its descendant element
: fires continuously while the mouse moves inside the target element. Mouseout cannot be triggered by the keyboard
: trigger when the mouse moves out of the target element
globalout: trigger when the mouse moves out of the entire chart
contextmenu: trigger when the mouse right clicks on the target element, that is, a right mouse click event, and a shortcut menu will pop up