正文

echarts的一点记录

IP云
IP云V管理员/4 阅读
10/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

echart官网地址： https://www.echartsjs.com/index.html

echarts实例地址：https://echarts.baidu.com/examples/

vue-cli对echart的引用

安装echarts依赖 npm install echarts -S

方式一：全局引入

main.js

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

vue组件

<template>
<div>
<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
</div>
</template><script>
export default {
name: 'myecharts2',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted () {
this.drawLine()
},
methods: {
drawLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('myChart'))
// 绘制图表
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
}
}
}
</script><style scoped></style>

echarts全局引用

方式二：按需引入

全局引入会将所有的echarts图标打包，导致体积过大，所以还是按需引入较好

<template>
<div>
<e-charts class="echart-item" theme="ovilia-green" :options="option_default"></e-charts>
</div>
</template><script>
import ECharts from 'vue-echarts'
let echarts = require('echarts/lib/echarts')// 引入线形图组件
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'myecharts',
data: function () {
return {
option_default: {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}]
} }
},
components: {
ECharts
}
}
</script><style lang="less" scoped>
@gray_light:#999;
@gray_normal:#666;
@gray_dark:#333;
@font_small:12px;
.stats-chart{
border-top:1px solid #eee;
padding-top: 10px;
margin-bottom: 20px;
p{font-size: @font_small;color:@gray_light;}
.stats-chart-item{
border:1px solid #eee;
border-radius: 5px;
padding:15px 0px;
.chart-item-name{margin-left:20px;margin-bottom:5px; font-size: @font_small;color:@gray_light}
.chart-item-total{margin-left:20px;font-size:22px;color:@gray_dark}
.echart-item{
width: 100%;
margin-top: -45px;
margin-bottom: -35px;
max-height: 220px;
@media (min-width: 768px) {
max-height: 260px;
}
@media (min-width: 1280px) {
max-height: 300px;
}
}
}
}
</style>

echarts按需引入

几点问题：

tooltip显示问题（即鼠标上浮到echarts组件会显示x、y坐标数据）

1、需要引入提示框和title组件

// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

2、在图标option中设置tooltip的trigger属性

tooltip: {
          trigger: 'axis'
        },

trigger：默认 'item' 可选‘item|axis’

item：鼠标上浮到具体的点位显示tip提示，并只显示一条线的

axis：鼠标上浮到echart表格显示tip提示，可显示多条线

说明文档地址：https://echarts.baidu.com/echarts2/doc/doc.html#Tooltip

Y轴标签值太长显示不全问题

未处理之前的效果

处理：设置option下的有关属性

grid.left:grid组件距离容器左侧的距离，默认10%，可以修改成像素值和百分比

grid.right:grid组件距离容器右侧的距离，默认10%，可以修改成像素值和百分比

yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。

设置参数如下：

option：{
grid: {show:'true',borderWidth:'0',left: '15%',right:'15%'},
yAxis: {
type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 100000 && value <) {
value = value / 10000 + '万'
} else if (value >= 10000000) {
value = value / 10000000 + '千万'
}
return value
}
}
},
……
}

echartsY轴边距设置

引用： https://blog.csdn.net/dandelion_drq/article/details/79270597

相关属性说明：（项目中使用的是line线形图组件）

lineStyle:线条颜色设置

lineStyle:{
                color:'#3ca0ff',
                type:'solid'
              }

areaStyle：线条下的阴影颜色设置

areaStyle:{
                color:'#c1eaff'
              }

series.itemStyle 数据节点颜色设置

series.smooth 平滑曲线设置

series: [{
                data: [],
                type: 'line',
                smooth: true,
                areaStyle: {},
                itemStyle: {
                  normal: {
                    color:'#00a9ff'
                  }
                }
              }]