涉及到的几个目录
一、下载echart
方法一：从下载的源代码或编译产物安装
方法二：从 npm 安装
npm install echarts
方法三：选择需要的模块，在线定制下载
即echarts.min.js 下载
二、引入
import echarts from '@/components/echarts/echarts.vue';下面的是 echarts.vue的代码 您可以在components 创建一个echarts的文件夹里面放echarts.vue
代码里script.src = './static/echarts.min.js' （更改路径不行的话，还是建议使用此路径） 在【4里面】
<template>
<view>
<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
</view>
</template>
<script>
export default {
name: 'Echarts',
props: {
option: {
type: Object,
required: true
}
}
}
</script>
<script module="echarts" lang="renderjs">
export default {
data() {
return {
chart: null
}
},
mounted() {
if (typeof window.echarts === 'object') {
this.init()
} else {
// 动态引入类库
const script = document.createElement('script')
script.src = './static/echarts.min.js'
// script.src = './static/echarts/echarts.min.js'
script.onload = this.init
document.head.appendChild(script)
}
},
methods: {
/**
* 初始化echarts
*/
init() {
this.chart = echarts.init(this.$el)
this.update(this.option)
},
/**
* 监测数据更新
* @param {Object} option
*/
update(option) {
if (this.chart) {
// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
if (option) {
// tooltip
if (option.tooltip) {
// 判断是否设置tooltip的位置
if (option.tooltip.positionStatus) {
option.tooltip.position = this.tooltipPosition()
}
// 判断是否格式化tooltip
if (option.tooltip.formatterStatus) {
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
}
}
// 设置新的option
this.chart.setOption(option, option.notMerge)
}
}
},
/**
* 设置tooltip的位置，防止超出画布
*/
tooltipPosition() {
return (point, params, dom, rect, size) => {
//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
let x = point[0]
let y = point[1]
let viewWidth = size.viewSize[0]
let viewHeight = size.viewSize[1]
let boxWidth = size.contentSize[0]
let boxHeight = size.contentSize[1]
let posX = 0 //x坐标位置
let posY = 0 //y坐标位置
if (x < boxWidth) { //左边放不开
posX = 5
} else { //左边放的下
posX = x - boxWidth
}
if (y < boxHeight) { //上边放不开
posY = 5
} else { //上边放得下
posY = y - boxHeight
}
return [posX, posY]
}
},
/**
* tooltip格式化
* @param {Object} unit 数值后的单位
* @param {Object} formatFloat2 是否保留两位小数
* @param {Object} formatThousands 是否添加千分位
*/
tooltipFormatter(unit, formatFloat2, formatThousands) {
return params => {
let result = ''
unit = unit ? unit : ''
for (let i in params) {
if (i == 0) {
result += params[i].axisValueLabel
}
let value = '--'
if (params[i].data !== null) {
value = params[i].data
// 保留两位小数
if (formatFloat2) {
value = this.formatFloat2(value)
}
// 添加千分位
if (formatThousands) {
value = this.formatThousands(value)
}
}
// #ifdef H5
result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
// #endif
// #ifdef APP-PLUS
result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
// #endif
}
return result
}
},
/**
* 保留两位小数
* @param {Object} value
*/
formatFloat2(value) {
let temp = Math.round(parseFloat(value) * 100) / 100
let xsd = temp.toString().split('.')
if (xsd.length === 1) {
temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
return temp
}
if (xsd.length > 1) {
if (xsd[1].length < 2) {
temp = temp.toString() + '0'
}
return temp
}
},
/**
* 添加千分位
* @param {Object} value
*/
formatThousands(value) {
if (value === undefined || value === null) {
value = ''
}
if (!isNaN(value)) {
value = value + ''
}
let re = /\d{1,3}(?=(\d{3})+$)/g
let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
return s1.replace(re, '$&,') + s2
})
return n1
}
}
}
</script>
<style lang="scss" scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>5、随便起一个Vue页面 复制下面代码demo测试
<template>
<view class="viewimg">
<view>
<view>echarts示列</view>
<echarts :option="option" style="height: 300px;"></echarts>
<button @click="updateClick">更新数据</button>
</view>
<view>
<echarts :option="optionone" style="height: 400px;"></echarts>
</view>
<view>
<echarts :option="optiontwo" style="height: 400px;"></echarts>
</view>
</view>
</template>
<script>
import echarts from '@/components/echarts/echarts.vue';
export default {
data() {
return {
option: {},
optionone: {},
optiontwo: {}
};
},
onLoad() {
// console.log(777777);
},
components: {
echarts
},
mounted() {
this.logstatrt();
this.logstatrtone();
this.logstatrttwo();
},
methods: {
logstatrt() {
// console.log('初次调用');
this.option = {
backgroundColor: '#011246',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '25%',
right: '45',
bottom: '20',
left: '30'
},
legend: {
data: [{
name: '人保'
}, {
name: '太保'
}, {
name: '平安'
}, {
name: '人保增速'
}, {
name: '太保增速'
}, {
name: '平安增速'
}],
top: '0%',
textStyle: {
color: 'rgba(255,255,255,0.9)' //图例文字
}
},
dataZoom: [{
type: 'slider',
realtime: true,
//移动端展示方式
handleSize: '100%', //滑动条两侧的大小
start: 0,
end: 50
}],
grid: {
left: '3%',
right: '4%',
bottom: '15%',
height: '70%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['2015', '2016', '2017', '2018', '2019'],
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.7)',
fontSize: '14'
}
}
}],
yAxis: [{
type: 'value',
name: '单位万',
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
color: 'rgba(255,255,255,.6)'
},
axisLine: {
min: 0,
max: 10,
lineStyle: {
color: 'rgba(255,255,255,.4)'
}
} //左线色
},
{
type: 'value',
name: '增速',
show: true,
axisLabel: {
show: true,
fontSize: 14,
formatter: '{value} %',
color: 'rgba(255,255,255,.6)'
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.4)'
}
}, //右线色
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.1)'
}
} //x轴线
}
],
series: [{
name: '人保',
type: 'bar',
data: [35, 36.6, 38.8, 40.84, 41.6],
// "barWidth": "30",
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#00FFE3' // 0% 处的颜色
},
{
offset: 1,
color: '#4693EC' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
}
// "barGap": "0.2"
},
{
name: '太保',
type: 'bar',
data: [16, 14.8, 14.1, 15, 16.3],
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#248ff7' // 0% 处的颜色
},
{
offset: 1,
color: '#6851f1' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
{
name: '平安',
type: 'bar',
data: [10.2, 9.2, 9.1, 9.85, 8.9],
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#fccb05' // 0% 处的颜色
},
{
offset: 1,
color: '#f5804d' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
{
name: '人保增速',
type: 'line',
yAxisIndex: 1,
data: [0, 6.01, 5.26, 1.48],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#86d370'
}
},
smooth: true
},
{
name: '太保增速',
type: 'line',
yAxisIndex: 1,
data: [0, -4.73, 6.38, 8.67],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#3496f8'
}
},
smooth: true
},
{
name: '平安增速',
type: 'line',
yAxisIndex: 1,
data: [0, -1.09, 8.24, -9.64],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#fbc30d'
}
},
smooth: true
}
]
};
},
logstatrtone() {
this.optionone = {
backgroundColor: '#0c1e55',
color: ['#00a0fc', '#ffe400', '#ff9a09', '#ef1e5f', '#23cbe5', '#ec561b', '#ffa500', '#dddf00', '#b23aee',
'#50b332'
],
tooltip: {
trigger: 'item',
// formatter: " {a} <br/>{b} : {c} ({d}%)"
formatter: " 企业数：{c}"
},
legend: { // 图例-图上面的分类
// orient: 'vertical',
// right: 30,
// icon: 'rect',//长方形
icon: 'circle',
top: "1%",
itemWidth: 10,
itemHeight: 10,
// itemGap: 13,
data: ['16℃以下', '16-18℃', '18-20℃', '20-22℃', '22-24℃', '24-26℃', '26℃以上'],
// right: '56%',
textStyle: {
fontSize: 14,
color: '#a6cde8',
lineHeight: 49
},
formatter: function(name) {
return "" + name + ""
},
padding: [2, 2]
},
grid: {
top: '20%',
left: '53%',
right: '10%',
bottom: '6%',
containLabel: true
},
series: [{
label: {
normal: {
formatter: '{b|{b}：} {c} \n {per|{d}%} ',
rich: {}
},
emphasis: {
show: true,
}
},
// labelLine: {
// normal: {
// show: false
// }
// },
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [{
value: 195,
name: '16℃以下'
},
{
value: 185,
name: '16-18℃'
},
{
value: 260,
name: '18-20℃'
},
{
value: 213,
name: '20-22℃'
},
{
value: 52,
name: '22-24℃'
},
{
value: 35,
name: '24-26℃'
},
{
value: 46,
name: '26℃以上'
},
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
labelLine: {
normal: {
length: 5,
length2: 1,
smooth: true,
}
},
}]
};
},
logstatrttwo() {
var m2R2Data = [{
value: 335,
value1: 234,
legendname: 'Ⅰ类',
name: "Ⅰ类",
itemStyle: {
color: "#8d7fec"
}
},
{
value: 310,
value1: 314,
legendname: 'Ⅱ类',
name: "Ⅱ类",
itemStyle: {
color: "#5085f2"
}
},
{
value: 234,
value1: 235,
legendname: 'Ⅲ类',
name: "Ⅲ类",
itemStyle: {
color: "#e75fc3"
}
},
{
value: 154,
value1: 213,
legendname: 'Ⅳ类',
name: "Ⅳ类",
itemStyle: {
color: "#f87be2"
}
},
{
value: 335,
value1: 321,
legendname: 'Ⅴ类',
name: "Ⅴ类",
itemStyle: {
color: "#f2719a"
}
},
];
this.optiontwo = {
title: [{
text: '全网调控情况',
textStyle: {
fontSize: 16,
color: "black"
},
left: "35%"
},
{
text: '全网均温',
subtext: 44.5 + '℃',
textStyle: {
fontSize: 15,
color: "black"
},
subtextStyle: {
fontSize: 20,
color: 'black'
},
textAlign: "center",
x: '40%',
y: '44%',
}
],
tooltip: {
trigger: 'item',
formatter: function(parms) {
var str = parms.seriesName + "</br>" +
parms.marker + "" + parms.data.legendname + "</br>" +
"当前温度：" + parms.data.value + "</br>" +
"目标温度：" + parms.data.value1 + "</br>" +
"占比：" + parms.percent + "%";
return str;
}
},
legend: {
type: "scroll",
orient: 'vertical',
left: '80%',
align: 'left',
top: 'middle',
textStyle: {
color: '#8C8C8C'
},
},
series: [{
name: '全网调控情况',
type: 'pie',
center: ['40%', '50%'],
radius: ['40%', '65%'],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
itemStyle: { //图形样式
normal: {
borderColor: '#ffffff',
borderWidth: 1,
},
},
label: {
normal: {
show: true,
position: 'outter',
formatter: function(parms) {
return parms.data.legendname
}
}
},
labelLine: {
normal: {
length: 15,
length2: 13,
smooth: true,
}
},
data: m2R2Data
}]
};
},
/**
* 更新数据
*/
updateClick() {
this.option.series=[{
name: '人保',
type: 'bar',
data: [10, 10, 10, 10, 10],
// "barWidth": "30",
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#00FFE3' // 0% 处的颜色
},
{
offset: 1,
color: '#4693EC' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
}
}
// "barGap": "0.2"
},
{
name: '太保',
type: 'bar',
data: [16, 14.8, 14.1, 15, 16.3],
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#248ff7' // 0% 处的颜色
},
{
offset: 1,
color: '#6851f1' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
{
name: '平安',
type: 'bar',
data: [10.2, 9.2, 9.1, 9.85, 8.9],
color: {
type: 'linear',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0,
color: '#fccb05' // 0% 处的颜色
},
{
offset: 1,
color: '#f5804d' // 100% 处的颜色
}
],
globalCoord: false // 缺省为 false
}
},
{
name: '人保增速',
type: 'line',
yAxisIndex: 1,
data: [0, 6.01, 5.26, 1.48],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#86d370'
}
},
smooth: true
},
{
name: '太保增速',
type: 'line',
yAxisIndex: 1,
data: [0, -4.73, 6.38, 8.67],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#3496f8'
}
},
smooth: true
},
{
name: '平安增速',
type: 'line',
yAxisIndex: 1,
data: [0, -1.09, 8.24, -9.64],
lineStyle: {
normal: {
width: 2
}
},
itemStyle: {
normal: {
color: '#fbc30d'
}
},
smooth: true
}
]
// this.option = {
// notMerge: true, // 自定义变量：true代表不合并数据，比如从折线图变为柱形图则需设置为true；false或不写代表合并
// xAxis: {
// type: 'category',
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
// },
// yAxis: {
// type: 'value'
// },
// series: [{
// data: [120, 200, 150, 80, 70, 110, 130],
// type: 'bar',
// showBackground: true,
// backgroundStyle: {
// color: 'rgba(220, 220, 220, 0.8)'
// }
// }]
// };
}
}
};
</script>
<style>
.viewimg {
height: 100%;
/* background: #d1e9e9; */
}
</style>
908
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
