今天做app需要用到图表数据，在Echarts和Hcharts中，选择了Echarts，毕竟Hcharts是仿Echarts。以前用的Echarts是在H5中用的，这次是vue中使用。
网上看了一下看到了vue-echarts，看了一下git的文档。
vue-echarts 安装-使用
1.安装
1)官方推荐安装方式为（我采用的）
npm install echarts vue-echarts
2)直接文件引入
依次引入 echarts 和 vue-echarts：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
接下来继续按照文档操作
用 npm 与 Vue Loader 基于 ES Module 引入（推荐用法）（我将按照这个引入到了main.js中）
import Vue from 'vue'
import ECharts from 'vue-echarts' // 在 webpack 环境下指向 components/ECharts.vue
// 手动引入 ECharts 各模块来减小打包体积
import 'echarts/lib/chart/pie' //（我用的扇形所以直接引入的扇形）
//import 'echarts/lib/component/tooltip'没有用到无需引入
// 如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可
// 以 ECharts-GL 为例：
// 需要安装依赖：npm install --save echarts-gl，并添加如下引用
//import 'echarts-gl'（没有用到无需引入）
// 注册组件后即可使用
Vue.component('v-chart', ECharts)
接下来我们接开始说使用
错误使用
<template>
<v-chart :options="polar"/>
</template>
<style>
/**
* 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
* 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
*/
.echarts {
width: 100%;
height: 100%;
}
</style>
<script>
export default {
data () {
let data = []
for (let i = 0; i <= 360; i++) {
let t = i / 180 * Math.PI
let r = Math.sin(2 * t) * Math.cos(2 * t)
data.push([r, i])
}
return {
polar: {
legend: {
orient: 'vertical',
left: 10,
data: [],
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: true,
position: 'outside',
color: '#666666',
//为了防止饼图画在显示数据之外
alignTo: 'edge',
margin: 10,
},
emphasis: {
label: {
show: true,
// 如果设置了这个移动端点击字体放大,pc端鼠标移入字体放大
// fontSize: '30',
},
},
labelLine: {
show: true,
length: 20,
lineStyle: {
color: '#666666',
},
},
//我当时使用的是这个数据为了实现异步请求所以我改成了[]
// [
// { value: 335, name: '直接访问' },
// { value: 310, name: '邮件营销' },
// { value: 234, name: '联盟广告' },
// { value: 135, name: '视频广告' },
// { value: 135, name: '试试广告' },
// { value: 1548, name: '搜索引擎' },
// ]
data: [],
hoverOffset: 0,
selectedMode: false,
selectedOffset: 0,
},
],
color: [
//自定义的颜色 建议大家不要这么写颜色，这么写如果假如当你的data中的value都为0的时候，你显示出来的环形都为第一个颜色
//改为此种写法比较合适这种情况当你的value的值都为0的时候他的颜色是均分的
//[{
//PERCENT: '0.00%',
//value: 0,
//name: '100000以上',
//itemStyle: {
// color: '#FDD143',
// },
//},
//{
//PERCENT: '0.00%',
//value: 0,
//name: '100000以上',
//itemStyle: {
// color: '#FD43FD',
// },
//}]
'#FDD143',
'#FD43FD',
'#43CBFD',
'#6043FD',
'#68FD43',
'#FD8143',
],
},
}
}
methods: {
init() {
console.log(echarts);
//我这里报错了
//报错的东西百度了一下说应该在main.js中需要
//Vue.prototype.$echarts = ECharts;
//然后console.log(this.$echarts)发现this.$echarts.init还是报错
this.$nextTick(() => {
//错误写法
// var myChart = echarts.init(document.getElementById('premium'));
// myChart.setOption({});
//正确写法 axios请求之后直接将数据赋值到data就可以了
this.polar.series[0].data = [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' },
{
value: 135, name: '试试广告' },
{
value: 1548, name: '搜索引擎' },
];
});
},
},
}
</script>
Echarts直接按需引入
这个没啥好说的大家应该都会
<!-- -->
<template>
<div
v-loading="loading"
class="b-wrap"
>
<div
id="chart"
class="echarts"
></div>
</div>
</template>
<script>
const echarts = require('echarts/lib/echarts')
// 引入折线图
require('echarts/lib/chart/line')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
components: {
},
data () {
return {
}
},
computed: {
},
watch: {
},
created () {
},
mounted () {
},
methods: {
initChart (xlist = [], ylist = []) {
const self = this
this.echarts = echarts.init(document.getElementById('chart'))
// 绘制图表
this.echarts.setOption({
tooltip: {
trigger: 'item',
formatter: function (data) {
let datavalue = ''
if (self.listindex === 5) {
datavalue = data.value + '%'
} else {
datavalue = data.value
}
return data.name + '<br/>' + self.list[self.listindex].txt + '：' + datavalue // 将小数转化为百分数显示
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xlist
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: this.listindex === 5 ? '{value} %' : '{value}'
}
},
series: [{
data: ylist,
type: 'line',
smooth: true,
lineStyle: {
color: '#10B7FF' // 改变折线颜色
},
itemStyle: {
normal: {
borderColor: '#10B7FF', // 拐点边框颜色
borderWidth: 2 // 拐点边框大小
}
}
}]
})
},
}
}
</script>