使用echarts 前端 ec-canvas 小程序 图表
顾鸣
1.echarts配置地址 :https://echarts.apache.org/zh/option.html#title.id
2.echarts官网 https://echarts.apache.org/zh/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
echarts在vue使用
<template>
<div>
<div class="content-map">
<div :id="id" class="echarts"></div>
</div>
<div class="content-line"></div>
<div v-show="isTable" class="content-tab clearfix">
<div class="content-table">
<div class="content-table-view">
<div class="content-table-view1">
<table class="content-table-table" border="1" ref="table">
<tr>
<th v-for="(item,index) in titleList" :key="index">{{item}}</th>
</tr>
<tr v-for="(item,index) in tableList" :key="index">
<td v-for="(oitem,oindex) in item.list" :key="oindex" @click="goDetail(item.code)" v-bind:class="oitem=='查看'?'search':''">{{oitem | oType}}</td>
</tr>
</table>
</div>
<div class="content-table-view2">
<table class="content-table-table" border="1" ref="table">
<tr>
<th v-for="(item,index) in titleList" :key="index">{{item}}</th>
</tr>
<tr v-for="(item,index) in tableList" :key="index">
<td v-for="(oitem,oindex) in item.list" :key="oindex" @click="goDetail(item.code)" v-bind:class="oitem=='查看'?'search':''">{{oitem | oType}}</td>
</tr>
</table>
</div>
</div>
</div>
<div v-show="isSector" class="content-sector">
<div id="sector"></div>
</div>
</div>
<div v-show="!isTable" class="content-tab clearfix">
<div class="seven_echarts" id="seven"></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import shenzhen from "@/assets/json/shenzhen.json";
import baoan from "@/assets/json/baoan.json";
import dapeng from "@/assets/json/dapeng.json";
import futian from "@/assets/json/futian.json";
import guangming from "@/assets/json/guangming.json";
import longgang from "@/assets/json/longgang.json";
import longhua from "@/assets/json/longhua.json";
import luohu from "@/assets/json/luohu.json";
import nanshan from "@/assets/json/nanshan.json";
import pinshan from "@/assets/json/pinshan.json";
import yantian from "@/assets/json/yantian.json";
export default {
data() {
return {
//地图
id: "echarts_" + new Date().getTime() + Math.floor(Math.random() * 1000),
// 初始化地图
myMap: null,
// 表头
titleList: [],
// 内容
tableList: [],
// 扇形图
mySector: null,
//数据
cwldata: shenzhen,
//对象
myLine: null,
//是否显示饼图
isSector: true,
//是否显示表格，不是表格就是折线
isTable: true,
itemcwl: null,
street: null,
type: null,
animation_duration: 1,
};
},
computed: {},
filters: {
oType(value) {
switch (value) {
case "temperature":
return "体温";
case "bloodpressure":
return "血压";
case "glu":
return "血糖";
case "hemoglobin":
return "糖化血红蛋白";
case "uric_acid":
return "尿酸";
case "cholesterol":
return "胆固醇";
case "hdl":
return "高密度脂蛋白";
case "ldl":
return "低密度脂蛋白";
case "trig":
return "甘油三酯";
default:
return value;
}
}
},
methods: {
//数据
getGenre(itemcwl, street, type) {
console.log("getGenre", itemcwl, street, type);
this.itemcwl = itemcwl
this.street = street
this.type = type
let params = {
city: "深圳市",
item: itemcwl
};
if (type in [0, 1] && street !== "全市") {
params["area"] = street;
}
let url;
if (type == 0 && street == "全市") {
url = "/health_api/index/area_data";
} else if (type == 0 && street !== "全市") {
url = "/health_api/index/street_data";
} else if (type == 1) {
url = "health_api/index/exception_data";
} else if (type == 2) {
url = "health_api/index/compare_data";
} else if (type == 3) {
url = "health_api/index/compare_data";
}
this.$axios({
url,
methods: "get",
params
}).then(res => {
console.log("getGenre", itemcwl, street, type, url, params, res);
let area_usernum = res.data.area_usernum;
let state = res.data.state;
if (type == 0) {
this.isTable = true; // 显示表格
this.isSector = true; // 显示饼图
let statistics = res.data.statistics;
// 表格
if (street == "全市") {
this.titleList = ["区域", "检测项目", ...state, "检测总人数"]; // 表格表头
} else {
this.titleList = ["街道", "检测项目", ...state, "检测总人数"]; // 表格表头
}
// 表内容
let tableList = [];
for (let item in statistics) {
let total = statistics[item].reduce((total, value, index) => {
return total + value;
});
let oitem = {
list: [item, itemcwl, ...statistics[item], total]
};
tableList.push(oitem);
}
this.tableList = tableList;
this.$refs.table.style['animation-duration'] = (this.tableList.length > 4 ? 0.8 * this.tableList.length : 0) + "s";
console.log("getGenre tableList", this.titleList, this.tableList);
//地图
this.myMap.clear();
this.cwldata = this.cwlType(street);
let arr = this.cwldata.features.map(item => {
var name = item.properties.name;
var oitem = {
name: name,
value: 0,
obj: {}
};
if (street == '全市') {
for (let i in statistics[name]) {
oitem["obj"][i] = statistics[name][i];
if (i !== "1") {
oitem["value"] += statistics[name][i];
}
}
} else {
for (let i in statistics["合计"]) {
oitem["obj"][i] = statistics["合计"][i];
if (i !== "1") {
oitem["value"] += statistics["合计"][i];
}
}
}
return oitem;
});
if (street == "全市") {
this.map(arr, state);
} else {
this.map(arr, state);
}
console.log("getGenre map", arr, state);
// 扇形图
if (street == "全市") {
let sectorList = [];
state.forEach((item, index) => {
sectorList.push({ name: item, value: statistics["合计"][index] });
});
this.sectorList = sectorList;
this.sector(itemcwl, street);
console.log("getGenre sector", itemcwl, street);
} else {
this.isSector = false; // 隐藏饼图
}
} else if (type == 1) {
this.isSector = true; // 显示饼图
this.isTable = true; // 显示表格
let statistics = res.data.statistics;
//地图
this.myMap.clear();
this.cwldata = this.cwlType();
let arr = this.cwldata.features.map(item => {
var name = item.properties.name;
var oitem = {
name: name,
value: 0,
obj: {}
};
for (let i in statistics[name]) {
oitem["obj"][i] = statistics[name][i];
if (i !== "1") {
oitem["value"] += statistics[name][i];
}
}
return oitem;
});
this.map(arr, state);
console.log("getGenre map", arr, state);
//图表
// 表头
this.titleList = [
"区域",
"姓名",
"性别",
"详情地址",
"预警时间",
"检测数据",
"操作"
];
// 表内容
let cwlarr = [],
obj = {};
res.data.exception_user.forEach((item, index) => {
if (itemcwl == "bloodpressure") {
item.value = JSON.parse(item.value);
item.value = item.value["systolic"];
item.show = "高压" + " " + item.value;
} else {
item.show = this.oype(item.type) + " " + item.value;
}
obj = {
code: item.userid,
list: [
item.area,
item.name,
item.sex,
item.address,
item.createtime,
item.show,
"查看"
]
};
cwlarr.push(obj);
});
this.tableList = cwlarr;
this.$refs.table.style['animation-duration'] = (this.tableList.length > 4 ? 0.8 * this.tableList.length : 0) + "s";
console.log("getGenre tableList", this.titleList, this.tableList);
// 扇形图
let sectorList = [
{ name: "正常", value: res.data.exception_count.normal },
{ name: "异常", value: res.data.exception_count.exception }
];
this.sectorList = sectorList;
this.sector(itemcwl, street);
console.log("getGenre sector", itemcwl, street);
} else if (type == 2) {
this.isTable = false; //显示折线
//地图
this.myMap.clear();
this.cwldata = this.cwlType();
let state = ["恢复", "异常"];
let arr = this.cwldata.features.map(item => {
var name = item.properties.name;
return {
name: name,
value: res.data.exception[name].slice(-1)[0],
obj: {
0: res.data.better[name].slice(-1),
1: res.data.exception[name].slice(-1)
}
};
});
this.map(arr, state);
console.log("getGenre map", arr, state);
// 折线图
let sevenArr = res.data.state;
let serieTitle = ["恢复", "异常"];
let serieList = [
res.data.better[street == "全市" ? "合计" : street],
res.data.exception[street == "全市" ? "合计" : street]
];
this.seven_echarts(sevenArr, serieTitle, serieList, street, type);
console.log("getGenre seven", sevenArr, serieTitle, serieList);
} else if (type == 3) {
this.isTable = false; //显示折线
//地图
this.myMap.clear();
this.cwldata = this.cwlType();
let state = ["新增"];
let arr = this.cwldata.features.map(item => {
var name = item.properties.name;
return {
name: name,
value: res.data.add[name].slice(-1)[0],
obj: {
0: res.data.add[name].slice(-1)
}
};
});
this.map(arr, state);
console.log("getGenre map", arr, state);
// 折线图
let sevenArr = res.data.state;
let serieTitle, serieList;
if (street == "全市") {
serieTitle = ["全市", ""];
serieList = [res.data.add["合计"], null];
} else {
serieTitle = ["全市", street];
serieList = [res.data.add["合计"], res.data.add[street]];
}
this.seven_echarts(sevenArr, serieTitle, serieList, street, type);
console.log("getGenre seven", sevenArr, serieTitle, serieList);
}
});
},
// 地图
map(arr = [], state) {
//地图组件
echarts.registerMap("深圳", this.cwldata);
//绘制地图
this.myMap.setOption({
//显示内容的
tooltip: {
//样式
formatter: params => {
var str = "";
if (state.length != 0) {
str =
'<span style="color:#00fffc;font-size:20px;line-height:35px;display: block;margin:0 20px;">';
for (var i = 0; i < state.length; i++) {
str +=
state[i] + " : " + (params.data.obj[i] || 0) + "人<br>";
}
str += "</span>";
}
return str;
}
},
//映射地图
visualMap: {
min: Math.min.apply(Math, arr.map(item => { return item.value })),
max: Math.max.apply(Math, arr.map(item => { return item.value })),
show: false,
splitNumber: 4,
inRange: {
color: [
"#1A6EAF",
"#DDC75E",
"#DD8E5E",
"#DD5E5E",
]
},
textStyle: {
color: "#fff"
}
},
//地图组件
geo: {
map: "深圳",
label: {
normal: {
show: true,
fontSize: 20,
color: "#fff"
},
//选中效果
emphasis: {
show: true,
color: "#fff"
}
},
roam: false,
itemStyle: {
normal: {
//区域颜色
// areaColor: "#8db200",
// 边框颜色
borderColor: "#6367ad",
borderWidth: 3
},
//选中效果
emphasis: {
areaColor: "#feb6aa" // hover效果
}
},
/*regions: [
//对不同的区块进行着色
{
name: "宝安区", //区块名称
itemStyle: {
normal: {
areaColor: "#5EDD91"
}
}
},
{
name: "罗湖区",
itemStyle: {
normal: {
areaColor: "#1A6EAF"
}
}
},
{
name: "南山区",
itemStyle: {
normal: {
areaColor: "#DDC75E"
}
}
},
{
name: "光明新区",
itemStyle: {
normal: {
areaColor: "#DD5E5E"
}
}
},
{
name: "龙华新区",
itemStyle: {
normal: {
areaColor: "#DD5E5E"
}
}
},
{
name: "龙岗区",
itemStyle: {
normal: {
areaColor: "#1A6EAF"
}
}
},
{
name: "盐田区",
itemStyle: {
normal: {
areaColor: "#C10000"
}
}
},
{
name: "坪山新区",
itemStyle: {
normal: {
areaColor: "#DD8E5E"
}
}
},
{
name: "大鹏新区",
itemStyle: {
normal: {
areaColor: "#5EDD91"
}
}
}
],*/
left: arr.length == 1 ? "30%" : "10%",
right: arr.length == 1 ? "30%" : "10%",
top: "2%",
bottom: "2%"
},
// 数据展示
series: [{
name: "", // 配合 legend 的data 使用
type: "map",
geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
data: arr
}]
},
true
);
this.myMap.parent = [123];
this.myMap.on('click', this.echartsMapClick);
},
echartsMapClick(params) {
console.log('myMap click', params)
console.log(this.itemcwl, this.street, this.type);
if (this.street !== params.name) {
this.street = params.name
this.getGenre(this.itemcwl, this.street, this.type);
}
},
// 扇形
sector(itemcwl, street) {
//扇形初始化
this.mySector.setOption({
title: {
text: `${street}${this.oype(itemcwl)}比例图`, //主标题
subtext: "", //副标题
x: "left", //x轴方向对齐方式
// link: "/#/",
target: "self",
padding: [20, 0, 0, 70],
textStyle: {
color: "#fff"
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {d}% ({c}人)"
},
// legend: {
// orient: "vertical",
// bottom: "bottom",
// // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
// data: []
// },
series: [{
name: `${this.oype(itemcwl)}数据`,
type: "pie",
radius: "65%",
center: ["50%", "60%"],
//数据展示
// data: [
// { value: 335, name: "直接访问" },
// { value: 310, name: "邮件营销" },
// { value: 234, name: "联盟广告" },
// { value: 135, name: "视频广告" },
// { value: 1548, name: "搜索引擎" }
// ],
data: this.sectorList,
roseType: "radius",
label: {
fontSize: 14,
color: "rgba(255, 255, 255, 0.9)",
formatter: "{b} \n{d}% ({c}人)"
},
labelLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.3)"
},
smooth: 0.1,
length: 10,
length2: 20
},
itemStyle: {
//选中效果
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}],
color: ["#6b89ff", "#34abff", "#ff9745", "#dd5e5e", "#c10000"]
},
true
);
},
// 折线图
seven_echarts(sevenArr, serieTitle, serieList, street, type) {
this.myLine.setOption({
// backgroundColor: "#FFF0F5",
title: {
text: `${this.oype(street)}${this.otitle(type)}`,
// subtext: "模拟数据",
x: "center",
y: "4%",
textStyle: {
color: "#fff",
fontSize: 16,
padding: [15]
}
},
color: ["#fff", "#ff0"],
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） | 'vertical'（垂直）
orient: "vertical",
// x 设置水平安放位置，默认全图居中，可选值：'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: "5%",
// y 设置垂直安放位置，默认全图顶端，可选值：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: "6%",
data: serieTitle,
textStyle: {
color: "#00ffff",
fontSize: 14,
fontWeight: 300,
padding: [0, 0, 0, 15]
}
},
// 图表距边框的距离,可选值：'百分比'| {number}（单位px）
grid: {
top: "18%", // 等价于 y: '16%'
left: "16%",
right: "10%",
bottom: "4%",
containLabel: true
},
xAxis: {
type: "category",
boundaryGap: false,
name: "日期",
data: sevenArr,
// 改变x轴颜色
axisLine: {
lineStyle: {
color: "#2A5D75"
}
},
// 改变x轴字体颜色和大小
axisLabel: {
textStyle: {
color: "#62B4BB",
fontSize: "12"
}
}
},
yAxis: [{
type: "value",
name: "人数",
// min: 0,
// max: 45,
// interval: 5, //间隔
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLine: {
lineStyle: {
color: "#2A5D75"
}
},
// 改变y轴字体颜色和大小
axisLabel: {
formatter: "{value}", // 给y轴添加单位
textStyle: {
color: "#8ACDF3",
fontSize: "12"
}
},
splitLine: {
lineStyle: {
color: "#2A5D75"
}
}
},
{
type: "value",
name: "人数",
minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
axisLine: {
lineStyle: {
color: "#2A5D75"
}
},
// 改变y轴字体颜色和大小
axisLabel: {
formatter: "{value}", // 给y轴添加单位
textStyle: {
color: "#8ACDF3",
fontSize: "12"
}
}
}
],
series: [{
data: serieList[0],
name: serieTitle[0],
type: "line",
lineStyle: {
//设置折线色颜色
color: "#00ffff"
},
itemStyle: {
//设置折线折点的颜色
normal: {
color: "#00ffff"
// label : {show: true}
}
}
},
{
data: serieList[1],
name: serieTitle[1],
type: "line",
lineStyle: {
//设置折线色颜色
color: "#c0c246"
},
itemStyle: {
//设置折线折点的颜色
normal: {
color: "#c0c246"
}
}
}
],
tooltip: {
//鼠标悬停提示内容
trigger: "axis", // 触发类型，默认数据触发，可选为：'axis' item
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "line", // 默认为直线，可选为：'line' | 'shadow'
label: "cross",
show: true
}
}
},
true
);
},
// 省份
cwlType(val) {
// console.log('cwlType', val);
switch (val) {
case "光明新区":
return guangming;
case "南山区":
return nanshan;
case "坪山新区":
return pinshan;
case "大鹏新区":
return dapeng;
case "宝安区":
return baoan;
case "盐田区":
return yantian;
case "福田区":
return futian;
case "罗湖区":
return luohu;
case "龙华新区":
return longhua;
case "龙岗区":
return longgang;
default:
return shenzhen;
}
},
// 过滤方法
oype(value) {
switch (value) {
case "temperature":
return "体温";
case "bloodpressure":
return "血压";
case "glu":
return "血糖";
case "hemoglobin":
return "糖化血红蛋白";
case "uric_acid":
return "尿酸";
case "cholesterol":
return "胆固醇";
case "hdl":
return "高密度脂蛋白";
case "ldl ":
return "低密度脂蛋白";
case "trig ":
return "甘油三酯";
default:
return value;
}
},
// 折线标题
otitle(value) {
switch (value) {
case 2:
return "(康复/异常)";
case 3:
return "(新增)";
default:
return value;
}
},
// 详情页面
goDetail(code) {
console.log("goDetail", code);
if (typeof code !== "undefined") {
this.$router.push({ name: "detaile", query: code });
}
}
},
created() {},
mounted() {
//地图
this.myMap = echarts.init(document.getElementById(this.id));
// 扇形图
this.mySector = echarts.init(document.getElementById("sector"));
//折线图
this.myLine = echarts.init(document.getElementById("seven"));
// 监听数据(扇形图,地图)
window.addEventListener("resize", () => {
this.myMap.resize();
this.mySector.resize();
this.myLine.resize();
});
}
};
</script>
<style scoped lang="scss">
@import "src/style/mixin";
// 内容
.content-map {
height: rem(592);
background-color: #162a48;
width: 100%;
box-sizing: border-box;
border-radius: rem(10);
&>.echarts {
height: 100%;
width: rem(1642);
box-sizing: border-box;
}
}
.content-line {
height: rem(16);
}
.content-tab {
height: rem(300);
//表格
.content-table {
position: relative;
width: 67%;
height: 100%;
background-color: rgba(29, 57, 93, 0.6);
float: left;
position: relative;
border-radius: rem(10);
.content-table-view {
width: rem(990);
height: rem(232);
// overflow-y: scroll;
// &::-webkit-scrollbar {display:none}
overflow: hidden;
margin: rem(36) auto;
&::-webkit-scrollbar {
display: none;
}
.content-table-view1 {
height: rem(47);
overflow: hidden;
z-index: 999;
}
.content-table-view2 {
overflow: hidden;
z-index: 99;
.content-table-table {
transform: translateY(rem(-47));
}
}
.content-table-table {
border: rem(1) solid #19607d;
color: #fff;
width: 100%;
/*table-layout: fixed;*/
animation: myMove 0s linear infinite;
animation-play-state: running;
// animation-fill-mode: forwards;
&:hover {
animation-play-state: paused;
}
/*文字无缝滚动*/
@keyframes myMove {
from {
transform: translateY(rem(-46));
}
to {
transform: translateY(-70%);
}
}
tr {
height: rem(46);
line-height: rem(46);
text-align: center;
th {
font-size: rem(17);
font-weight: bold;
min-width: rem(60);
}
td {
font-size: rem(16);
}
.search {
color: #5EDD91;
}
}
}
}
}
//表内容
.content-sector {
width: 32%;
height: 100%;
background-color: rgba(29, 57, 94, 0.6);
float: right;
border-radius: rem(10);
#sector {
height: 100%;
width: 100%;
}
}
//折线
#seven {
width: rem(1642);
height: rem(334);
background-color: rgba(29, 57, 93, 0.6);
border-radius: rem(10);
}
}
</style>
微信小程序
import * as echarts from '../../component/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true // 延迟加载
},
},
onLoad() {
},
onReady() {
this.ecComponent = this.selectComponent('#mychart-dom-line'); //获取组件
this.ecComponent.init((canvas, width, height, dpr) => { //初始化
// 初始化图表
this.echart = echarts.init(canvas, null, { //初始化图表
width: width,
height: height,
devicePixelRatio: dpr // new
});
this.option = { //数据配置
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
this.echart.setOption(this.option, true); //赋值渲染
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return this.echart;
});
},
//模拟ajax
change() {
var option = this.option
let p = new Promise((resolve, reject) => {
option.series = [{
data: [82, 93, 90, 93, 129, 133, 132],
type: 'line'
}]
resolve()
})
p.then((res) => {
console.log(option, 'option')
this.echart.setOption(option, true); //赋值渲染
})
},
onShow() {
},
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
});
方式二
const app = getApp();
import * as echarts from '../../component/ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // new
});
canvas.setChart(chart);
let p=new Promise((resolv,reject)=>{
var option = app.globalData.option || {}
if(option){
resolv(option)
}
})
p.then(res=>{
console.log(res)
chart.setOption(res);
})
return chart;
}
Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦！',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},
onReady() {
}
});
类似资料：