Today’s app needs to use chart data. In Echarts and Hcharts, Echarts is selected. After all, Hcharts is an imitation of Echarts. The Echarts used before was used in H5, this time it is used in vue.
I looked online and saw vue-echarts , and I looked at the git documentation.
vue-echarts installation-use
1. Installation
1) The official recommended installation method is (I used)
npm install echarts vue-echarts
2) Direct file import,
followed by echarts and 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>
Next, continue to follow the documentation and
use npm and Vue Loader to introduce based on ES Module (recommended usage) (I will introduce this into main.js according to this)
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)
Next, we will start talking about
incorrect use
<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 directly introduced on demand
This is nothing to say, everyone should know
<!-- -->
<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>