echart vue,vue+echart

　　本文主要介绍Vue使用Echarts实现排名效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　Vue用Echarts做排行榜的感觉，供大家参考。具体情况如下

　　其实也不是什么技术文章，只是简单的echarts风格，不过有些地方还是不太好设置，还是省省吧。以后自己用的话，可以直接拿来修改再用。

　　效果是这样的：

　　这个排行榜一共显示了前六名，就是这个样子。然后，把这个echarts做成一个组件，在需要的地方引用就行了。

　　直接在下面编码：

　　文件

　　柱形图-排行榜

　　/doc

　　模板

　　div id= bar style= width:100%；高度：100%；/div

　　/模板

　　脚本

　　从“echarts”导入*作为echarts

　　导出默认值{

　　data() {

　　返回{

　　xValue: [1，1，1，2，3，3]，

　　Y: [陕西移动，山西移动，北京移动，山东移动，河北移动，河南移动]，

　　};

　　},

　　已安装(){

　　this.show()

　　},

　　方法：{

　　show() {

　　this . charts=echarts . init(document . getelementbyid( bar ))

　　var选项={

　　颜色：[#d84430]，

　　工具提示：{

　　显示：真实

　　},

　　亚西斯：{

　　轴棒：{

　　显示：假

　　},

　　轴线：{

　　秀：假的，

　　},

　　axisLabel: {

　　内：真的，

　　垂直对齐：“底部”，

　　行高：40，

　　颜色： #DDDFEB ，

　　Formatter: function (value，index){//设置Y轴文本的颜色

　　if(索引2) {

　　返回“{first”值“}”

　　}否则{

　　返回“{other”值“}”

　　}

　　},

　　丰富：{

　　其他：{

　　颜色： #DDDFEB ，

　　不透明度：0.57

　　},

　　首先：{

　　颜色： #DDDFEB

　　}

　　}

　　},

　　数据：this . y值

　　},

　　xAxis: {

　　nameTextStyle: {

　　颜色： rgba(255，255，255，0.8)，

　　对齐：“右”

　　},

　　分割线：{

　　秀：假的，

　　},

　　轴线：{

　　秀：假的，

　　},

　　axisLabel: {

　　颜色： rgba(255，255，255，0.8)

　　},

　　},

　　网格：{

　　顶部：“0%”，

　　底部：“0%”，

　　左：“0%”，

　　右：“0%”

　　},

　　系列：[{

　　名称：“提醒排行榜”，

　　条宽：15，

　　类型：“条形”，

　　数据：this.xValue，

　　项目样式：{

　　正常：{

　　borderRadius: [3，20，20，3]，

　　Color: function (params) {//设置柱形图的颜色

　　if (params.dataIndex===5) {

　　返回 #d84430

　　} else if (params.dataIndex===4) {

　　返回 #f38237

　　} else if (params.dataIndex===3) {

　　return #e2aa20

　　}否则{

　　返回 #608289

　　}

　　}

　　},

　　}

　　}]

　　};

　　//使用刚才指定的配置项和数据显示图表。

　　this.charts.setOption(选项)；

　　window . addevent listener( resize ，()={

　　this.charts.resize()

　　})

　　}

　　}

　　}

　　/脚本

　　样式范围

　　/风格

　　就是这样。如果你有特别的风格，可以稍微改变一下。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。