Echarts.apache.org/zh/tutorial…

Echarts document configuration item link

Step 1: Install

npm install echarts –save

Part two: Introduction

var echarts = require(“echarts”);

<template> <div class="index"> <div id="main" style="width: 600px; height:400px;" ></div> <div id="main2" style="width:600px; height:400px"></div> </div> </template> <script> var echarts = require("echarts"); export default { data() { return {}; Var myChart = echarts.init(document.getelementById ("main"));}, mounted() {// Initialize echarts.init(document.getelementById ("main")); Var options = {title: {text: "ECharts starting example ",}, tooltip: {}, xAxis: {data: [" shirt "and" sweater ", "snow spins unlined upper garment", "pants", "high heels", "socks"],}, yAxis: {}, series: [{name: "sales", type: "bar", data: [5, 20, 36, 10, 10, 20],}; myChart.setOption(options); Var myChart2 = echarts.init(document.getelementById ("main2")); Var option2 = {// Chart title: {text: "line chart stack ",}, tooltip: {trigger: "axis",}, legend: {textStyle: {fontSize: 12, color: # f20,}, data: [" email marketing ", "advertising", "video ads", "direct access", "search engine"],}, / / in the rectangular coordinate system drawing grid, the grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true, }, toolbox: { feature: { saveAsImage: {}, }, }, xAxis: {type: "category", boundaryGap: false data: [" Monday ", "Tuesday", "on Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],}, yAxis: {type: "Value ",}, series: [{name:" email marketing ", type: "line", stack: "total ", data: [120, 132, 101, 134, 90, 230, 210],}, {name: }, {name: "video advertising ", type: "line", stack:" total ", data: [220, 182, 191, 234, 290, 330, 310],}, {name: "video advertising ", type: "line", stack: Data: [150, 232, 201, 154, 190, 330, 410],}, {name: "direct access ", type: "line", stack:" total ", data: [150, 232, 201, 154, 190, 330, 410],}, {name: "direct access ", type:" stack ", data: [320, 332, 301, 334, 390, 330, 320],}, {name: "search engine ", type:" stack ", data: [820, 932, 901, 934, 1290, 1330, 1320],}; myChart2.setOption(option2); }}; </script> <style> .index{ display: flex; } </style>Copy the code

2. Use Element-UI for pagination

<template> <div class="app"> <! "> < span style=" max-width: 100%; clear: both; 100%"> <el-table-column prop="date" label=" date" width="180"></el-table-column> <el-table-column prop="name" label=" name" Width ="180"></el-table-column> <el-table-column prop="address" label=" address" ></el-table-column> </el-table> <div class="tabListPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> </div> </template> <script> export default { data(){ return { // TableData :[], // Default display number of pages currentPage:1, // total number of pages, according to the interface to obtain data length (note: PageSize: [1,2,3,4], // The default number of bytes per page (can be modified) PageSize:1,}}, Post (url,{orgCode:1},{emulateJSON: true}, {headers:{" content-type ": "application/x-www-form-urlencoded; Charset = UTF-8 ",}}). Then (reponse=>{console.log(reponse) // Assign data to tableData this.tableData=data.data.body // TotalCount this.totalCount=data.data.body.length})}, HandleSizeChange (val) {this.PageSize=val When changing the number of items displayed per page, CurrentPage =1} handleCurrentChange(val) {this.currentPage=val},}, created:function(){ this.getData() } } </script>Copy the code

2. UCharts High-performance cross-terminal charts

(1) Use process

1. Use the uni-app plugin market address ext.dcloud.net.cn/plugin?id=2… To import

(2) Get started quickly

1. Reference method

import uCharts from '.. /.. /components/u-charts/u-charts.js';Copy the code

2. Template writing

< canvas canvas-id="canvasColumn" id="canvasColumn" class="charts">
Copy the code

3. Style writing

.charts{width: 750upx; height:500upx; background-color: #FFFFFF; }Copy the code

4. Instantiation methods

New uCharts({see API Parameters section for specific parameters})Copy the code

3. Add bubbles

var markdata=[]; // This is to add the bubble icon to the map, take the backup data // get the JSON style, $.getjson ("./chengdu. Json ", "", function(data) {markData =convertData(data.features) // Generate map createMap(data); } function createMap(data){echarts.registermap (' CD ',data); var chart = echarts.init(document.getElementById('map')); Chart.setoption ({title:{x:'center', text:' chendu ', textStyle:{color:'# FFF '}}, dataRange: {min: 80,// 500,// Max of color range, same as Max in data x: 'left', y: 'bottom', text:[' high ',' low '], // text, default numeric text calculable: true, inRange: {// color: [' lightSkyblue ','yellow', 'orangered','red']}, show:false}, tooltip: {show:true, formatter: '{b} < br / > diamond grade: {c}'}, series: [{type: 'the map, the map: 'cd', itemStyle:{ normal:{label:{show:false}}, emphasis:{label:{show:true}} }, data:markdata, markPoint:{ symbolSize: 45, itemStyle: {normal: {borderColor: '#33CBFF', color:'#33CBFF', borderWidth: 1, true } } }, data:markdata } }] }); window.addEventListener('resize', function () { chart.resize(); }); Function convertData(arrs) {var markData = []; Var valuess = (100300200500211203305406507202100210101, 1), for (var i = 0; i < arrs.length; I ++) {markdata.push({}) if (arrs[I].properties.name == '新 中 ') {markData [I].coord = new Array(Arrs [I].properties. Center [0]) + 0.1, parseFloat(arrs[I].properties. Center [1]) -0.18); console.log(markdata[i]) } else { markdata[i].coord = arrs[i].properties.center; } markdata[i].name = arrs[i].properties.name; markdata[i].value = valuess[i] } return markdata }Copy the code

4. The y axis values of Echarts multiple line charts are inconsistent with the actual values

5. Echarts radar map more than the number of words how to show the line, more than three lines of the line

Replace (/\s{3}/g),function(match){console.log(match) return match + '\n'}) return  text }Copy the code

6. Distance between axis name and axis

nameGap:26
Copy the code