Use of Echarts
1. Introduce echarts files, and you can download them directly in vue (npm I echarts--s)
2. Initialization of echarts
//In main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts // Initialize echarts instance based on prepared dom var myChart = echarts.init(document.getElementById('main')); //Drawing Charts myChart.setOption(option); // Broken Line Chart Settings option={ // Title is the title component, which contains the legend Legend Legend component of the main title and subtitle tooltip: { //tooltip prompt box component //Trigger trigger type item: data item graphic trigger, mainly used in scatter plots, pie charts and other charts without category axis //Axis: The coordinate axis trigger is mainly used in the bar chart, the line chart and so on, which will use the category axis. trigger: 'axis', axisPointer: { //Axis Indicator Configuration Item type Indicator type'cross'CrossStar Indicator type: 'cross', //Text Label Style Settings for Coordinate Axis Indicators label: { backgroundColor: '#6a7985' } }, textStyle: { // Text Style of Tip Box Floating Layer fontSize: '30' } }, grid: { //Location of Cartesian coordinate system in container containLabel: grid area contains scale label of coordinate axis left: '1.25%', right: '1.25%', bottom: '25%', containLabel: true }, xAxis: [ //x-axis settings { type: 'category', //Type of coordinate axis boundaryGap: true,//White space strategy on both sides of coordinate axis data: ['2019-04-08', '2019-04-09', '2019-04-10', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08', '2019-04-08'], //Type of coordinate axis axisLine: { //Relevant Settings of Axis of Coordinate Axis show: false }, axisTick: { //Coordinate axis calibration correlation setting interval: coordinate calibration interval in: coordinate calibration orientation show: false }, axisLabel: { //interval: interval of coordinate scale labels: Interior of coordinate scale labels: orientation style setting of coordinate scale labels fontFamily: 'HYQiHei-EES', // 20px fontSize: '24', color: '#485157', align: 'center', interval: 1, margin: 45, rotate: -25 }, splitLine: { //Separation line of coordinate axis in grid region show: true, lineStyle: { color: 'rgba(80,243,237,0.1)' } //Separator color }, splitArea: { show: false } //Separation of coordinate axes in grid region } ], yAxis: [ { type: 'value', axisLine: { show: false }, axisTick: { show: false }, axisLabel: { fontFamily: 'HYQiHei-EES', // 20px fontSize: '24', color: '#485157', align: 'center', inside: true }, splitLine: { show: false }, splitArea: { show: false } } ], series: [ { // Series data symbol: Icon name: 'Accumulated fuel saving( L)', type: 'line', symbol: 'image://img/save_petrol@3x.png', symbolSize: [21, 33], showSymbol: false, itemStyle: { //Style of inflection mark of broken line color: 'rgba(0,122,255,0.3)' }, lineStyle: { color: 'rgba(0,122,255,1)' }, //Line Style stack: 'total', areaStyle: {}, data: [0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6,0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6, 0.35, 0.45,0.35, 0.45,] //data: oil }, { name: 'Cumulative emission reduction( Kg)', type: 'line', symbol: 'image://img/reduce_exhuast@3x.png', symbolSize: [21, 33], showSymbol: false, itemStyle: { color: 'rgba(10,234,212,0.2)' }, lineStyle: { color: 'rgba(10,234,212,1)' }, stack: 'total', areaStyle: { normal: {} }, // data: [0.12, 0.23, 0.2, 0.32, 0.5, 0.5, 0.25, 0.35, 0.15, 0.35, 0.15, 0.35, 0.5,0.32, 0.23, 0.4, 0.5, 0.46, 0.6, 0.35, 0.45, 0.35, 0.55, 0.35, 0.55, 0.6, 0.35, 0.45,0.35, 0.45,] data: cumulative } ] } // Pie chart setting option={ tooltip: { show: false }, toolbox: { show: false }, // color : ['#3dd4de','#b697cd','#a6f08f'], backgroundColor: 'transparent', series: [{ name: 'Pie1', type: 'pie', clockWise: false, radius: ['75%', '98%'], //Setting the inside and outside radius of pie chart itemStyle: { normal: { label: { show: false }, labelLine: { show: false }, shadowBlur: 40, shadowColor: 'rgba(40, 40, 40, 0.5)' } }, hoverAnimation: false, center: ['50%', '50%'], data: [{ value: data1, // Data to be displayed label: { //Label configuration for a single sector normal: { formatter: '{d}%', //Content of text display position: 'center', show: true, textStyle: { //style fontSize: '114', fontFamily: 'HYQiHei-GES', fontWeight: 'normal', color: '#fff' } } }, itemStyle: { //Graphic Style normal: { color: color // shadowColor: color, // shadowBlur: 4 } } }, { value: remaining, // Display of the remaining proportions name: 'invisible', itemStyle: { normal: { color: 'rgba(148,170,186,.6)', // The color of the incomplete circle label: { show: false }, labelLine: { show: false } }, emphasis: { // Highlight Style // Color:'rgba (44, 59, 70,.3)'// / color of incomplete rings } } }] }] }
Introduction of ecahrts to map of China
Advantages: Only map China, set the color of each block, provide latitude and longitude can set icons on the map.
Disadvantage: Enlargement can't automatically zoom in to cities, counties, towns and so on like map bar and Baidu map. The longitude and latitude position of the map can not be obtained, and the api of the map can not be used.
-
Introducing Chinese Map Data china.js
-
Setting options Configuration Setting Geographic Coordinate System Component geo
myChart.setOption({ tooltip: { show: false }, geo: { map: 'china', roam: true, //Whether to turn on mouse zooming and translation roaming label: { position: ['50%', '50%'], normal: { show: true, textStyle: { color: '#485157', fontSize: '30' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 1)' //Setting the boundary line }, emphasis: { areaColor: 'rgba(35,193,227,0.6)', shadowOffsetX: 0, shadowOffsetY: 0, shadowBlur: 20, borderWidth: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, 'data': data }, series: [ // {Set your own icon // type: 'scatter', // coordinateSystem: 'geo', // data: this.cityNumber, // data: cityNumber, // symbolSize: (value, params) => { // if (value[2] > 0 && value[2] <= 10) { // params.symbolSize = [52, 52] // } else if (value[2] > 10 && value[2] <= 100) { // params.symbolSize = [62, 62] // } else if (value[2] > 100 && value[2] <= 1000) { // params.symbolSize = [79, 79] // } else if (value[2] > 1000 && value[2] <= 10000) { // params.symbolSize = [89, 89] // } else if (value[2] > 10000) { // params.symbolSize = [114, 114] // } // return params.symbolSize // }, // symbol: 'image://http://localhost:8080/img/52_09.png', // label: { // normal: { // formatter: '{@[2]}', // position: 'inside', // show: true, // color: '#fff', // fontSize: '14' // }, // emphasis: { // show: true // } // } // }, { //Ripples provided by components have dynamic effects type: 'effectScatter', coordinateSystem: 'geo', data: this.cityNumber, //Data labeled on Graphs symbolSize: (value, params) => { if (value[2] > 0 && value[2] <= 10) { params.symbolSize = [60, 60] } else if (value[2] > 10 && value[2] <= 100) { params.symbolSize = [66, 66] } else if (value[2] > 100 && value[2] <= 1000) { params.symbolSize = [72, 72] } else if (value[2] > 1000 && value[2] <= 10000) { params.symbolSize = [90, 90] } else if (value[2] > 10000) { params.symbolSize = [120, 120] } return params.symbolSize }, showEffectOn: 'render', //Configure when the render render is rendered to display rippleEffect: { //Ripple special effects related configuration animation zoom-in small brushType: 'fill' //Ripple rendering method "stroke"'fill' }, hoverAnimation: true, //Whether to turn on the mouse hover prompt animation effect label: { normal: { formatter: '{@[2]}', //Text Display Settings position: 'inside', show: true, color: '#fff', fontSize: '24' }, emphasis: { show: true } }, itemStyle: { normal: { // color: '#008cff', color: 'rgba(35,193,227,1)' // shadowBlur: 10, // shadowColor: '#333' } } }, { name: 'China', type: 'map', geoIndex: 0, 'mapType': 'china', data: data //Map Data Corresponding Colors // tooltip: {show: false}, } ] })
Baidu Maps
Advantages: You can use background color with echarts, provide API s, get geographical locations and mark maps.
Disadvantage: Only the background color can be set, but the display area and enlargement ratio are not well adjusted (not only the map of China, including other cities and seas along the border, the display effect is not good and abrupt)
Use:
- Apply for the key, Baidu Map uses a special key (ak) as the path
In vue framework, the introduction of index.html
<body> <div id="app"></div> <!--Introduction of Baidu MapAPI--> <script src='http://api.map.baidu.com/api?v=2.0&ak=？&callback=init'></script> </body>
2. myChart.setOption({option}) in the vue page in use
// Introducing bmap.js import '../../../node_modules/echarts/extension/bmap/bmap.js' // Setting bmap in options bmap: { center: [105.65,37.76], zoom: 7, roam: true, mapStyle: { styleJson: [{}]} }
Map of Tubar
Advantages: API s are provided to capture geographic locations and mark maps. Data with background port matching
Disadvantage: Style can't be changed and display is abrupt
Big Screen Summary
It can only display the content displayed on the computer screen, and then enlarge its content. However, the ratio of the resolution of the computer to the resolution of the large screen is not the same, which can easily lead to the distortion of the pattern.
In modifying the large screen style, the page is set to 100% of the browser, and then layout by 100%, while ensuring the normal display of large screen pattern proportion.