echarts.apache.org/zh/tutorial…
第一步：安装
npm install echarts --save
第二部：引入
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 {};
},
mounted() { // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main")); // 绘制图表
var options = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(options); // 折线图
var myChart2 = echarts.init(document.getElementById("main2")); // 指定图表的配置项和数据
var option2 = { // 图表标题
title: {
text: "折线图堆叠",
},
tooltip: {
trigger: "axis",
},
legend: {
textStyle:{
fontSize:12,
color:'#f20',
},
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
}, // 直角坐标系内绘图网格，
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "联盟广告",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "视频广告",
type: "line",
stack: "总量",
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "直接访问",
type: "line",
stack: "总量",
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
myChart2.setOption(option2); },};
</script>
<style>
.index{
display: flex;
}
</style>
2、使用element-ui实现分页功能
<template>
<div class="app">
<!-- 将获取到的数据进行计算 -->
<el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></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:[],
// 默认显示第几页
currentPage:1,
// 总条数，根据接口获取数据长度(注意：这里不能为空)
totalCount:1,
// 个数选择器（可修改）
pageSizes:[1,2,3,4],
// 默认每页显示的条数（可修改）
PageSize:1,
}
},
methods:{
getData(){
// 这里使用axios，使用时请提前引入
axios.post(url,{
orgCode:1
},{emulateJSON: true},
{
headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
}
).then(reponse=>{
console.log(reponse)
// 将数据赋值给tableData
this.tableData=data.data.body
// 将数据的长度赋值给totalCount
this.totalCount=data.data.body.length
})
},
// 分页
// 每页显示的条数
handleSizeChange(val) {
// 改变每页显示的条数
this.PageSize=val
// 注意：在改变每页显示的条数时，要将页码显示到第一页
this.currentPage=1
},
// 显示第几页
handleCurrentChange(val) {
// 改变默认的页数
this.currentPage=val
},
},
created:function(){
this.getData()
}
}
</script>
2、uCharts高性能跨端图表
（1）使用过程
1、使用uni-app插件市场地址ext.dcloud.net.cn/plugin?id=2…中进行导入
（2）、快速上手
1、引用方法
import uCharts from '../../components/u-charts/u-charts.js';
2、模板写法
< canvas canvas-id="canvasColumn" id="canvasColumn" class="charts">
3、样式写法
.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
4、实例化方法
new uCharts({具体参数详见API参数章节})
3.添加气泡
var markdata=[];//这是为了给地图上添加气泡图标,拿取备用数据
//取得json的样式，读取json文件
$.getJSON("./chengdu.json", "", function(data) {
markdata=convertData(data.features)
//生成地图
createMap(data);
})
//生成地图
function createMap(data){
echarts.registerMap('cd',data);
var chart = echarts.init(document.getElementById('map'));
chart.setOption({
title:{
x:'center',
text:'成都',
textStyle:{
color:'#fff'
}
},
dataRange: {
min: 80,//颜色区间的最小值
max: 500,//颜色区间的最大值，和data中的最大值一致
x: 'left',
y: 'bottom',
text:['高','低'], // 文本，默认为数值文本
calculable : true,
inRange: {
//颜色区间
color: ['lightskyblue','yellow', 'orangered','red']
},
show:false
},
tooltip : {
show:true,
formatter: ' {b}<br /> 钻石段位: {c}'
},
series: [{
type: 'map',
map: 'cd',
itemStyle:{
normal:{label:{show:false}},
emphasis:{label:{show:true}}
},
data:markdata,
markPoint:{
symbolSize: 45,
itemStyle: {
normal: {
borderColor: '#33CBFF',
color:'#33CBFF',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: true
}
}
},
data:markdata
}
}]
});
window.addEventListener('resize', function () {
chart.resize();
});
}
//处理整合 气泡图标数据
function convertData(arrs) {
var markdata = [];
var valuess = [100,300,200,500,211,203,305,406,507,202,100,210,101,1];
for (var i = 0; i < arrs.length; i++) {
markdata.push({})
if (arrs[i].properties.name == '青羊区') {
markdata[i].coord = new Array(parseFloat(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
}
4.Echarts多条折线图y轴数值与实际值不符解决办法
5.echarts雷达图里字数超出怎么换行显示，超出3个子就换行
//使用正则
formatter:(text)=>{
text=text.replace(/\s{3}/g),function(match){
console.log(match)
return match + '\n'
})
return text
}
6.坐标轴名称与轴线之间的距离
nameGap:26
7.
<div class="guangzhou-box" @click="handleCloseMap"> <!-- 点击出来的弹框 --> <div class="map-box" v-if="isShowMapPop"> <img class="map-back" src="@/assets/img/mapbackground.png" /> <div class="map-con"> <div @click="handleMapJump(index)" class="map-container" v-for="(item, index) in mapList" > <span class="gd-name">{{ item.name }}</span> <span class="gd-value">{{ item.value }}</span> </div> </div> </div> <div id="map"></div> </div>
// 关闭地图 handleCloseMap() { this.isShowMapPop = false; this.setMap2(); },
setMap2() { this.map = echarts.init(document.getElementById("map")); echarts.registerMap("guangzhou", gzMap); var option = { tooltip: { trigger: "item", formatter: (e) => { // return ` // <div class="map-hover"> // <p> // <span>党组织简称：</span> // <span>${e.name}供电局党委</span> // </p> // <p> // <span>党委书记：</span> // <span>XXX</span> // </p> // <p> // <span>党委委员：</span> // <span>XXX</span> // </p> // <p> // <span>党员总数：</span> // <span>100</span> // </p> // <p> // <span>发展党员数量：</span> // <span>30</span> // </p> // <p> // <span>党务干部数量：</span> // <span>5</span> // </p> // </div> // `; }, show: true, }, series: [ { name: "广州市", type: "map", roam: true, map: "guangzhou", label: { show: true, }, colorBy: "data", top: 3, bottom: 3, data: [ { name: "荔湾区", itemStyle: { areaColor: "#78c9f8", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#78c9f8", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "越秀区", itemStyle: { areaColor: "#bb9fef", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#bb9fef", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "海珠区", itemStyle: { areaColor: "#70c13b", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#70c13b", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "天河区", itemStyle: { areaColor: "#e59f4d", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#e59f4d", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "白云区", itemStyle: { areaColor: "#f1cc55", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#f1cc55", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "黄埔区", itemStyle: { areaColor: "#fcfd61", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#fcfd61", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "番禺区", itemStyle: { areaColor: "#cccdf8", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#cccdf8", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "花都区", itemStyle: { areaColor: "#aaccfa", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#aaccfa", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "南沙区", itemStyle: { areaColor: "#cbcb52", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#cbcb52", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "从化区", itemStyle: { areaColor: "#eca1f5", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#eca1f5", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, { name: "增城区", itemStyle: { areaColor: "#b7f84f", borderWidth: 0, }, select: { itemStyle: { borderWidth: 3, areaColor: "#b7f84f", }, }, emphasis: { itemStyle: { areaColor: "#ffffff", }, }, }, ], markPoint: { symbol: "pin", // 标记点形状 symbolSize: 40, // 标记点大小 emphasis: { itemStyle: { color: "#f95520", }, }, data: [ { name: "天河区", coord: [113.265, 23.129101], }, { name: "黄埔区", coord: [113.444407, 23.160415], }, ], }, }, ], }; this.map.setOption(option); this.map.on("click", (params) => { console.log(`params`, params); console.log(this.map); if (params.componentType === "markPoint") { // 放大当前markPoint var data = option.series[0].markPoint.data; for (var i = 0; i < data.length; i++) { if (data[i].name === params.name) { // 动态修改symbolSize实现放大 data[i].symbolSize = 60; data[i].itemStyle = { color: "#f95520", }; } else { // 将其他markPoint恢复到原始大小 data[i].symbolSize = 40; data[i].itemStyle = { color: "", }; } } // 重新设置option更新图表 this.map.setOption(option); this.isShowMapPop = true; params.event.stop(); } else { this.isShowMapPop = false; } }); },
